Javascriptオブジェクトメソッドアクセス不能/定義されていません

Question

まず、私はこのような質問が何百万もあることを知っています。しかし、私はそれが私を助けることはできませんでした。

私はすべての画像がロードされた後にdrawメソッドを呼び出します。ご覧のとおり、描画メソッドの中の変数（loadedImages, this）にアクセスしようとすると、定義されません。

なぜこのようなことが起こり、どうすればその変数を取得できますか？それとthat.drawを（使用中

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

ストア本）

VARキャンバス= $（ '＃エリア'）[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??? 
     } 
    }; 
}