使用jQuery $（this）和ES6箭头函数（词法绑定）

Question

使用ES6箭头函数与词法this绑定非常好。

不过，我遇到了一个问题，刚才使用它具有典型的jQuery的点击绑定：

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

用箭头函数：

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

然后$(this)被转换到ES5 （self = this）类型闭包。

是否让Traceur忽略“$（this）”来进行词法绑定？

Answer 1

这跟Traceur没什么关系，也没有关系，这就是ES6的工作原理。这是您使用=>而不是function() { }所要求的特定功能。

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

解决这种特殊问题的方法是不使用this来获取点击的元素，而是使用event.currentTarget：

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

jQuery提供event.currentTarget特别是因为，即使ES6之前，它并不总是可能的jQuery强加给回调函数this（即，如果它是通过bind绑定到另一个上下文。

Answer 2

事件绑定

$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 
}); 

Answer 3

（这是一个答案，我写了这个问题的另一个版本，学习它是这个问题的副本之前。我认为这个答案能够将信息清楚地整合在一起，所以我决定把它作为一个社区维基添加进来，尽管它基本上只是其他答案的不同表述。）

你不能。这是箭头函数的一半，他们关闭了this，而不是通过它们被称为的方式来设置它们自己的。对于这个问题中的用例，如果你想在调用处理函数时由jQuery设置this，则处理函数需要是function函数。

但是，如果你有使用箭头（也许你想使用this什么意思箭头外）的理由，你可以使用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设置this时调用处理程序时相同。

Answer 4

另一种情况

最常见的答案是正确的，我已经投了票。

然而，还有另一种情况：

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

可以固定为：

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