Метод Javascript Object Inopcessible/Undefined

Question

Прежде всего, я знаю, что есть миллионы таких вопросов. Но я ничего не мог мне помочь.

Я вызываю метод draw после загрузки всех изображений. Как вы можете видеть, когда я пытаюсь получить доступ к переменной (loadedImages, this) внутри метода draw, я получаю undefined.

Почему это происходит и как я могу получить переменные?

var canvas = $('#area')[0], 
    context = canvas.getContext('2d'); 

function Character() { 
    return { 
     images: ["hair.png", "head.png", "mouth.png"], 
     loadedImages: {}, 
     init: function() { 
      this.loadImages(); 
     }, 
     loadImages: function() { 
      var loaded = 0, 
       imagesLength = this.images.length, 
       draw = this.draw; 

      for(var i = 0; i <= imagesLength - 1; i++) { 
       var image = new Image(), 
        bodyPart = this.images[i]; 

       image.onload = function() { 
        loaded++; 

        if(loaded == imagesLength) { 
         draw(); 
        } 
       }; 

       image.src = 'characters/Canser/' + bodyPart; 

       this.loadedImages[bodyPart.split(".")[0]] = image; 
      } 
     }, 
     draw: function() { 
      console.log(this); // undefined??? 
     } 
    }; 
} 

var canser = new Character(); 

canser.init(); 

Answer 1

Храните это в том, что и использовать that.draw()

вар холст = $ ('# зона') [0], контекст = canvas.getContext ('2d');

function Character() { 
    return { 
     images: ["hair.png", "head.png", "mouth.png"], 
     loadedImages: {}, 
     init: function() { 
      this.loadImages(); 
     }, 
     loadImages: function() { 
      var loaded = 0, 
       that = this, 
       imagesLength = this.images.length, 
       draw = this.draw; 

      for(var i = 0; i <= imagesLength - 1; i++) { 
       var image = new Image(), 
        bodyPart = this.images[i]; 

       image.onload = function() { 
        loaded++; 

        if(loaded == imagesLength) { 
         that.draw(); 
        } 
       }; 

       image.src = 'characters/Canser/' + bodyPart; 

       this.loadedImages[bodyPart.split(".")[0]] = image; 
      } 
     }, 
     draw: function() { 
      console.log(this); // undefined??? 
     } 
    }; 
}