的Javascript Image.onload回調目標函數

Question

這是推動我堅果 - 我一直團團團團轉，這沒有喜悅。我加載了多個動態圖像，並且有一個簡單的Javascript對象，我爲每個圖像實例化，並且具有一個回調來在異步加載圖像時呈現圖像。

我已經驗證回調代碼在獨立基礎上工作得很好（即，我可以在圖像加載後手動調用回調，並且圖像正確呈現），並且我已驗證圖像本身已成功加載（通過將對象的回調切換爲簡單的一行日誌記錄功能），但是當我試圖將它們結合在一起時，回調顯然永遠不會被調用。

我是比較新的JS，我懷疑，我失去了一些東西有關定義對象中的單向函數的基礎，但儘管有很多的谷歌搜索的，可以不知道是什麼。

請能有人告訴我我的方式錯誤？

function ImageHolder(aX,aY,aW,aH, anImageURL) { 
    this.posx=aX; 
    this.posy=aY; 
    this.posw=aW; 
    this.posh=aH; 
    this.url=anImageURL; 

    this.myImage = new Image(); 
    this.myImage.onload=this.onload; 
    this.myImage.src=anImageURL; 
    this.onload=function() { 

     try { 
      var d=document.getElementById("d"); 
      var mycanvas=d.getContext('2d'); 
      mycanvas.drawImage(this.myImage, this.posx, this.posy, this.posw, this.posh); 
      } catch(err) { 
       console.log('Onload: could not draw image '+this.url); 
       console.log(err); 
      } 
    }; 
} 

Answer 1

您有兩個問題：第一，this.onload沒有定義在您將它分配給圖像的位置。您可以通過錯過了存儲onload處理功能的this屬性的階段，解決這個問題。第二個問題是，當onload處理函數被調用，this未設置爲你認爲它是（其實，這是對剛剛加載的Image對象的引用）。你需要存儲到當前ImageHolder對象的引用和事件處理函數中使用它，而不是this。

新代碼：

var that = this; 

this.myImage = new Image(); 
this.myImage.onload=function() { 
    try { 
     var d=document.getElementById("d"); 
     var mycanvas=d.getContext('2d'); 
     mycanvas.drawImage(that.myImage, that.posx, that.posy, that.posw, that.posh); 
    } catch(err) { 
     console.log('Onload: could not draw image '+that.url); 
     console.log(err); 
    } 
}; 
this.myImage.src = anImageURL;