javascript - 如何将 this 上下文传递给事件处理程序？

Question

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

我有一个类，叫做 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。有些人可能希望事件处理程序中的 this 引用 ScrollBanner 实例，但遗憾的是它不是。它指的是触发点击事件的元素，在本例中为 span#banner1-nav

让 this 引用 ScrollBanner 类实例的最佳方法是什么？

Answer 1

旧的/传统的方式:

在变量中捕获this:

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

您还可以将 this 分配给一个变量，例如实例:

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

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

总体思路是将 this 存储在更高范围的变量中。

---

ECMAScript5 方式:

ECMAScript5 引入了一个新的函数属性:.bind() . MDC's documentation显示了不支持它的浏览器的实现。有了它，您可以将某个上下文绑定(bind)到一个函数:

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

但在幕后它正在做同样的事情。优点是您可以使用支持的浏览器中的内置功能。<​​/p>

请注意，这不同于 apply或 call .这两者都设置上下文并执行函数，而bind只设置上下文而不执行函数。

---

jQuery 方式:

jQuery 提供了一个方法 $.proxy()这是在做同样的事情:

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