从onload事件中调用对象函数会使它失去上下文 [英] Calling an object function from onload event makes it lose the context
问题描述
我想在加载所有必需的图像时调用一个函数.图像的数量是预先知道的，因此我尝试将函数调用附加到每个图像的onload事件上，并计算调用它的次数.
I wanted to call a function when all required images are loaded. The number of images is known in advance, so I tried attaching a function call to the onload event of each image and count the number of times it was called.
<html>
<head>
<script>
var tractor;
function Tractor()
{
this.init_graphics();
}
Tractor.prototype.init_graphics = function()
{
this.gr_max = 3;
this.load_count = 0;
this.loading_complete(); // #1 test call, works OK
this.img1 = new Image();
this.img1.onload = this.loading_complete; // #2 gets called, but gr_max = undefined, load_count = NaN
this.img1.src = "http://dl.dropbox.com/u/217824/tmp/rearwheel.gif"; //just a test image
}
Tractor.prototype.loading_complete = function()
{
this.load_count += 1;
alert("this.loading_complete, load_count = " + this.load_count + ", gr_max = " + this.gr_max);
if(this.load_count >= this.gr_max) {this.proceed();}
};
function start()
{
tractor = new Tractor();
}
</script>
</head>
<body onload="start();">
</body>
</html>
当刚从对象的另一个函数调用它时(请参阅#1)，它的工作原理与我预期的一样.但是，当从onload事件中调用它时(请参阅#2)，变量将变为未定义"或"NaN"等.发生了什么?我究竟做错了什么?我该如何运作?
When it's just called from another function of the object (see #1), it works just as I expected. When, however, it's called from onload event (see #2), the variables become "undefined" or "NaN" or something. What's happening? What am I doing wrong? How do I make it work?
我之前从未记得用Java创建过自己的对象，因此对于这种我的代码有什么问题"这类问题，我深表歉意.我使用了本文作为参考，第1.2节，主要是
I don't remember ever creating my own objects in Javascript before, so I certainly deeply apologize for this "what's wrong with my code" kind of question. I used this article as a reference, section 1.2, mainly.
以防万一，我将相同的代码放在 http://jsfiddle.net/ffJLn/
Just in case, I put the same code on http://jsfiddle.net/ffJLn/
推荐答案
绑定上下文到回调:
this.img1.onload = this.loading_complete.bind(this);
请参阅: http://jsfiddle.net/ffJLn/1/(与您的相同，但加上此内容)
See: http://jsfiddle.net/ffJLn/1/ (same as yours but with this addition)
Here's an explanation of how bind works in detail: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
基本思想是使绑定函数中的 this 等于您作为 bind 的参数传递的值.
The basic idea is that it makes this in the bound function equal to whatever you pass as the parameter to bind.
另一个选择是创建一个闭包:
Another option is to create a closure:
var self = this;
this.img1.onload = function() { self.loading_complete() };
闭包是保留对其上下文的引用的函数(实际上，javascript中的所有函数都是以这种方式工作的).因此，这里您要创建一个匿名函数，该函数保留对 self 的引用.因此，这是维护上下文并使 loading_complete 具有正确的 this 的另一种方法.
Closures are functions that keep references to their context (in fact, all functions in javascript work this way). So here you are creating an anonymous function that keeps a reference to self. So this is another way to maintain context and for loading_complete to have the right this.
请参阅: http://jsfiddle.net/ffJLn/2/(与您的相同，但有第二种可能性)
See: http://jsfiddle.net/ffJLn/2/ (same as yours but with the second possibility)
这篇关于从onload事件中调用对象函数会使它失去上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
