使用Object.call訪問父範圍

Question

我想訪問onload函數中的img屬性我該怎麼做？我將img屬性添加到Picture對象，並調用onload函數的範圍爲Picture對象，但我仍無法訪問this.img。

// picture 
    function Picture(x, y, w, h, imgurl){ 
     this.x = x; 
     this.y = y; 
     this.w = w; 
     this.h = h; 
     this.imgurl = imgurl; 
     this.draw = drawPic; 
     this.overcheck = overRect; 
    } // end picture 

    function drawPic(){ 
      this.img = new Image(); // add img to this scope 
      this.img.src = this.imgurl; 
      this.img.onload = function(){ 
       //ctx.drawImage(this.image, this.that.x, this.that.y, this.that.w, this.that.h); 
       ctx.drawImage(this.img, this.x, this.y, this.w, this.h); //error 
      } // end onload 
      this.img.onload.call(this); 
    } // end drawPic 

Answer 1

使用this

function drawPic() { 
    var self = this; 
    this.img = new Image(); 
    this.img.src = this.imgurl; 
    this.img.onload = function() { 
    ctx.drawImage(self.img, self.x, self.y, self.w, self.h); 
    }; 
} 

Answer 2

參考我認爲你必須定義對象內部的功能：

function Picture(x, y, w, h, imgurl){ 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.imgurl = imgurl; 
    this.draw = function(){ 
     this.img = new Image(); // add img to this scope 
     this.img.src = this.imgurl; 
     this.img.onload = function(){ 
      ctx.drawImage(this.img, this.x, this.y, this.w, this.h); //error 
     } // end onload 
     this.img.onload.call(this); 
    } // end drawPic; 

    this.overcheck = overRect; 
} // end picture