对象函数的 Javascript Image.onload 回调

Question

这让我抓狂 - 我一直在兜圈子，但一点也不开心。我正在加载多个动态图像，并有一个简单的 Javascript 对象，我为每个图像实例化该对象，并且在异步加载后有一个回调来渲染图像。

我已经验证回调代码在独立的基础上工作得很好(即我可以在图像加载后“手动”调用回调，并且图像被正确渲染)，并且我已经验证了图像本身已成功加载(通过将对象的回调切换为简单的一行日志记录功能)，但是当我尝试将它们全部绑定(bind)在一起时，回调显然从未被调用。

我对 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;