使用jQuery $(this)和ES6箭头函数(lexical this binding)

使用ES6的箭头函数与词法this绑定是伟大的。

不过,我刚才遇到一个问题,使用它与一个典型的jQuery点击绑定:

 class Game { foo() { self = this; this._pads.on('click', function() { if (self.go) { $(this).addClass('active'); } }); } } 

改为使用箭头function:

 class Game { foo() { this._pads.on('click', () => { if (this.go) { $(this).addClass('active'); } }); } } 

然后$(this)被转换成ES5(self = this)types的闭包。

是否让Traceur忽略“$(this)”来进行词法绑定?

    4 Solutions collect form web for “使用jQuery $(this)和ES6箭头函数(lexical this binding)”

    这跟Traceur没什么关系,只是ES6的工作原理。 这是您要求的特定function,而不是使用function () { }

    如果你想编写ES6,你需要一直编写ES6,你不能在特定的代码行上进出它,而且你肯定无法抑制或者改变方式=>工作。 即使你可以的话,你也只能得到一些离奇的版本的JavaScript,只有你自己明白,而且在你定制的Traceur之外是不会正常工作的,这当然不是Traceur的要点。

    解决这个问题的方法不是使用this来访问clicked元素,而是使用event.currentTarget

     Class Game { foo(){ this._pads.on('click', (event) => { if(this.go) { $(event.currentTarget).addClass('active'); } }); } } 

    jQuery提供了event.currentTarget因为即使在ES6之前,jQuery并不总是可能在callback函数中施加this (即,如果它通过bind绑定到另一个上下文。

    事件绑定

     $button.on('click', (e) => { var $this = $(e.currentTarget); // ... deal with $this }); 

    循环

     Array.prototype.forEach.call($items, (el, index, obj) => { var $this = $(el); // ... deal with $this }); 

    另一种情况

    最好的答案是正确的,我已经投了票。

    不过,还有另一种情况:

     $('jquery-selector').each(() => { $(this).click(); }) 

    可以修复为:

     $('jquery-selector').each((index, element) => { $(element).click(); }) 

    (这是我为这个问题的另一个版本写的一个答案,在得知这个问题是一个重复的问题之前,我认为这个答案能够很清楚地把信息汇总在一起,所以我决定把它作为一个社区维基添加进来,其他答案的措辞。)

    你不能。 这是箭头function的一半,他们closures了thisfunction,而不是由他们如何调用自己的设置。 对于问题中的用例,如果你想在调用处理程序时通过jQuery设置,处理程序将需要是一个functionfunction。

    但是,如果你有一个使用箭头的理由(也许你想用它来表示箭头之外的含义),如果你喜欢,你可以使用e.currentTarget代替this

     class Game { foo(){ this._pads.on('click', e => { // Note the `e` argument if(this.go) { $(e.currentTarget).addClass('active'); // Using it } }); } } 

    事件对象的currentTarget与jQuery在调用处理程序时设置的相同。