我如何将这个上下文传递给事件处理程序？

我知道这个问题没有多大意义，但让我试着澄清一下。

我有一个名为ScrollBanner的类，它看起来有点如下（为简洁起见，很多省略）：

function ScrollBanner() { this.initialize = function(selector) { $('span#banner1-nav').click(this._onClickNavigation); } this._onClickNavigation = function(event) { this.restartTimer(); // this == span#banner1-nav element from this.initialize //... } this.restartTimer() { //... } } 

正如你可以看到this.initialize设置一个点击处理程序this._onClickNavigation 。 有些人可能会期望在事件处理程序中的这个引用ScrollBanner实例，但可惜的是它没有。 它指的是触发点击事件的元素，在这里是span＃banner1-nav

什么是最好的方式来引用ScrollBanner类实例？

Answer 1

旧的/传统的方式：

捕获thisvariables：

 this.initialize = function(selector) { var that = this; $('span#banner1-nav').click(function(event) { that._onClickNavigation(event); }); } 

你也可以把它分配给一个variables，例如：

 function ScrollBanner() { var instance = this; // ... } 

在所有的调用中引用instance而不是this 。

总体思路是将其存储在一个更高范围的variables中。

---

ECMAScript5的方式：

ECMAScript5引入了一个新的函数属性： .bind() 。 MDC的文档显示了一个不支持它的浏览器的实现。 有了它，你可以绑定一个特定的上下文到一个函数：

 this.initialize = function(selector) { $('span#banner1-nav').click(this._onClickNavigation.bind(this)); } 

但在幕后它正在做同样的事情。 好处是您可以在支持的浏览器中使用内置function。

请注意，这与apply或call不同。 它们都设置上下文并执行函数，而bind只设置上下文而不执行函数。

---

jQuery方式：

jQuery提供了一个方法$.proxy() ，它也是这样做的：

 $('span#banner1-nav').click($.proxy(this._onClickNavigation, this)); 

Answer 2

我知道这是一个老问题，但我看到，在评论中提到了$ .proxy（）。 是的，它确实改变了对象的上下文，而不是在jQuery事件中。

  $('.selector').click( $.proxy( function() { console.log(this); /* this is set to .selector */ }, this)); 

$ .proxy（）返回这个reffered的作用域，然后这个函数被返回并由click()使用， click()它将作用域改变为.selector元素。

我已经testing了一分钟，但如果我错了，请告诉