Javascript Image.onload 回调到对象函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4123906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Image.onload callback to object function
提问by Laura
This is driving me nuts - I have been round and round in circles, and this no joy. I am loading multiple dynamic images, and have a simple Javascript object which I instantiate for each image, and which has a callback to render the image once it has loaded asynchronously.
这让我发疯——我一直在兜兜转转，这并不快乐。我正在加载多个动态图像，并有一个简单的 Javascript 对象，我为每个图像实例化，并且在异步加载后具有回调以呈现图像。
I have verified that the callback code works just fine on a stand-alone basis (ie. I can call the callback 'manually' after the image has loaded, and the image is rendered correctly), and I have verified that the image itself is successfully loaded (by switching the object's callback for a simple one line logging function), but when I try to tie it all together, the callback apparently never gets invoked.
我已经验证回调代码在独立的基础上工作得很好（即我可以在图像加载后“手动”调用回调，并且图像被正确渲染），并且我已经验证图像本身是成功加载（通过将对象的回调切换为一个简单的单行日志记录功能），但是当我尝试将它们全部绑定在一起时，回调显然永远不会被调用。
I'm relatively new to JS and I suspect that I am missing something fundamental about the way functions within objects are defined, but despite a lot of Googling, can't work out what.
我对 JS 比较陌生，我怀疑我缺少一些关于对象内函数定义方式的基本知识，但尽管有很多谷歌搜索，但无法弄清楚是什么。
Please can someone show me the error of my ways?
请有人告诉我我的方式错误吗？
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);
}
};
}
回答by Tim Down
You have two problems: first, this.onloadis not defined at the point at which you assign it to the image. You can fix this by missing out the stage of storing the onloadhandler function as a property of this. The second problem is that when the onloadhandler function is called, thisis not set to what you think it is (in fact, it's a reference to the Imageobject that has just loaded). You need to store a reference to the current ImageHolderobject and use it instead of thiswithin the event handler function.
你有两个问题：第一，this.onload在你将它分配给图像的点上没有定义。您可以通过忽略将onload处理程序函数存储为this. 第二个问题是当onload处理函数被调用时，this并没有设置成你认为的那样（实际上，它是对Image刚刚加载的对象的引用）。您需要存储对当前ImageHolder对象的引用并使用它而不是this在事件处理函数中使用。
New code:
新代码：
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;
