(从其他答案的注释中提取了一些解释)
问题出在下面这一行代码:
this.dom.addEventListener("click", self.onclick, false)
在这里,您传递一个函数对象作为回调。当事件触发时,该函数被调用,但是现在它没有与任何对象(this)相关联。
通过将函数(及其对象引用)包装在闭包中,可以解决该问题,如下所示:
this.dom.addEventListener(
"click",
function(event) {self.onclick(event)},
false);
由于闭包创建时将变量self分配为this,因此当在以后的某个时间调用闭包函数时,闭包函数将记住self变量的值。
解决这个问题的另一种方法是创建一个实用函数(并避免使用变量绑定this):
function bind(scope, fn) {
return function () {
fn.apply(scope, arguments);
};
}
更新后的代码将如下所示:
this.dom.addEventListener("click", bind(this, this.onclick), false);
Function.prototype.bind
是 ECMAScript 5 的一部分,提供相同的功能。因此你可以这样做:
this.dom.addEventListener("click", this.onclick.bind(this), false)
对于尚不支持ES5的浏览器,MDN提供以下替代方案:
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP
? this
: oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
this.cb = this.onclick.bind(this); addEventListener("click", this.cb);
- vsync