在javascript原型事件处理程序中保留'this'引用

Question

this在对象原型中存储的事件处理程序中保留javascript引用的正确方法是什么？我想远离创建像'_this'或'that'这样的临时变量,我不能使用像jQuery这样的框架.我看到很多人谈论使用'绑定'功能但不确定如何在我给定的场景中实现它.

var Example = function(foo,bar){
    this.foo = foo;
    this.bar = bar;
};
Example.prototype.SetEvent = function(){
    this.bar.onclick = this.ClickEvent;
};
Example.prototype.ClickEvent = function(){
    console.log(this.foo); // logs undefined because 'this' is really 'this.bar'
};

Answer 1

bind()到目前为止,我发现它是最干净的解决方案:

this.bar.onclick = this.ClickEvent.bind(this);

顺便说一下,另一个 this是that常规召集.

Answer 2

查看MDN文档bind:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

使用此功能,您可以更改范围(是什么this):

Example.prototype.SetEvent = function(){
    this.bar.onclick = this.ClickEvent.bind(this);
};

但请注意,这是EMCA的新增功能,因此可能并非所有用户代理都支持.上面链接的MDN文档中提供了一个pollyfill.

Answer 3

问题bind是只有IE9 +支持.

该函数可以使用polyfilled es5-shim,但它与本机实现不完全相同:

• 警告:绑定函数有一个prototype属性.
• 警告:绑定函数不要太努力,以免你操纵它们arguments和caller属性.
• 警告:绑定函数没有检入call并apply避免作为构造函数执行.

另一种选择可以是jQuery.proxy:

$(elem).on('click', $.proxy(eventHandler, this));

如果你想稍后删除事件处理程序,这会更有帮助,因为当一个函数通过该proxy方法时,jQuery会生成一个新的guid值,然后将该guid应用于核心函数以及结果代理函数,以便您可以使用原始函数引用来取消绑定已代理的事件处理程序回调:

$(elem).off('click', eventHandler);