如何将此上下文传递给事件处理程序？ [英] How do I pass the this context into an event handler?

问题描述

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

我有一个名为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._onClickNavigation 。有些人可能希望事件处理程序中的 this 引用 ScrollBanner 实例，但遗憾的是它没有。它指的是触发点击事件的元素，在这种情况下 span＃banner1-nav

什么是最好的获取方式 this 引用 ScrollBanner 类实例？

解决方案

旧/传统方式：

在变量中捕获此：

  this.initialize = function（selector）{
 var that = this; 
 $（'span＃banner1-nav'）。click（function（event）{
 that._onClickNavigation（event）; 
}）; 
} 
  

你也可以分配这个变量例如 instance ：

  function ScrollBanner（）{
 var instance =这个; 
 // ... 
} 
  

并参考<$ c $在所有电话中c>实例而不是此。

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

---

ECMAScript5方式：

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

  this.initialize = function（selector）{
 $ （ '跨度＃banner1-NAV'）点击（this._onClickNavigation.bind（本））; 
} 
  

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

请注意，这与 apply 或 call 。这两个设置上下文和执行该函数，而 bind 仅设置上下文而不执行该函数。

---

jQuery方式：

jQuery提供了一种方法 $。proxy（） 正在执行相同：

  $（'span＃banner1-nav'）。click（$。proxy（this._onClickNavigation，this）） ; 
  

I know this question doesn't make much sense, but let me try and clarify a bit.

I have a class, called ScrollBanner, and it looks somewhat as follows (a lot omitted for brevity):

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() {
        //...
    }
}

As you can see this.initialize sets a click handler to this._onClickNavigation. Some might expect the this inside the event handler to refer to the ScrollBanner instance, but sadly it doesn't. It refers to the element that trigerred the click event, in this case span#banner1-nav

What would be the best way to get this to refer to the ScrollBanner class instance?

解决方案

The old/traditional way:

Capture this in a variable:

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

You could also assign this to a variable e.g. instance:

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

and refer to instance instead of this in all the calls.

The overall idea is to store this in a variable in a higher scope.

---

The ECMAScript5 way:

ECMAScript5 introduces a new property of functions: .bind(). MDC's documentation shows an implementation for browsers that don't support it. With it you can bind a certain context to a function:

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

but behind the scenes it is doing the same thing. The advantage is that you make use of built-in functionality in browser that support is.

Note that this is different from apply or call. Both of these set the context and execute the function, whereas bind only sets the context without executing the function.

---

The jQuery way:

jQuery provides a method $.proxy() that is doing the same:

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

这篇关于如何将此上下文传递给事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！