Javascript 如何将此上下文传递给事件处理程序？

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

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

如您所见，this.initialize将单击处理程序设置为this。有些人可能期望事件处理程序中的this引用ScrollBanner实例，但遗憾的是它没有。它指触发点击事件的元素，在本例中为span#banner1 nav

---

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

旧的/传统的方法：

在变量中捕获此：

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

您还可以将

此

分配给变量，例如

实例

：

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

并在所有调用中参考

instance

，而不是

this

总体思路是将

此
存储在更高范围内的变量中


ECMAScript 5方式：

ECMAScript 5引入了函数的新属性：。显示了不支持它的浏览器的实现。使用它，您可以将特定上下文绑定到函数：

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

但在幕后，它也在做同样的事情。优点是您可以使用浏览器中支持的内置功能

请注意，这与或不同。这两种设置上下文和执行函数，而
bind
只设置上下文而不执行函数


jQuery方式：

jQuery提供了一个执行相同操作的方法：

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

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

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

$.proxy（）返回
此
引用的作用域中的函数，但该函数返回并由
单击（）
使用，然后将作用域更改为
.selector
元素

我已经在一分钟前测试过了，但是如果我弄错了，请告诉我这是一个很好的调用，我通常习惯在构造函数的顶部指定一个
var=this
，这样你总是可以引用它。然后一直使用
that
，这样就不会产生混淆（当然，假设您引用的是that，而不是其他this），这很有用，但感觉很脏。：）@乔伊泽菲尔：就是这样；）请看一下我的更新。jQuery难道没有跨浏览器兼容的bind（）函数吗？@JoeZephyr:对，我忘了。jquery拥有
$。proxy
：至少您现在知道了所有可能的方法；）不确定这在较旧的jQuery版本中是否不同，但此示例表明您错了：。
 $('.selector').click( $.proxy( function() {
     console.log(this); /* this is set to .selector */
 }, this));