问：

将 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'); }
    });
  }
}

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

有没有办法让 Traceur 忽略“$（this）”进行词法绑定？

javascript jquery ecmascript-6 箭头函数

如果要编写 ES6，则需要一直编写 ES6。你不能在某些代码行上切换它，你绝对不能抑制或改变工作方式。即使你可以，你也只会得到一些奇怪的JavaScript版本，只有你才能理解，而且在你定制的Traceur之外永远无法正常工作，这绝对不是Traceur的重点。=>

解决此特定问题的方法不是用于访问单击的元素，而是使用：thisevent.currentTarget

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

jQuery之所以提供，是因为即使在ES6之前，jQuery也并不总是能够对回调函数施加一个（即，如果它通过bind绑定到另一个上下文。event.currentTargetthis

“如果你想写ES6，你需要一直写ES6。”那是。。。。一个非常可疑的陈述。ES2015+是完全向后兼容的（除了极少数非常极端的情况）。你可以混合和分配给上的东西，以选择一个随机的例子。你可以继续使用（尽管我不会），或者使用这个东西而不是箭头函数（尽管我不会）。等。你不能做的是同时用于两种不同的东西。:-)class XX.prototypevarvar x = this;this

71赞 Ryan Huang 12/10/2015 #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
});

9赞 T.J. Crowder #3

（这是我为这个问题的另一个版本写的答案，在得知它是这个问题的重复之前。我认为答案相当清楚地汇集了信息，所以我决定将其添加为社区维基，尽管它在很大程度上只是其他答案的不同措辞。

你不能。这是箭头函数的一半，它们关闭而不是拥有自己的，这是由它们的调用方式设置的。对于问题中的用例，如果希望在调用处理程序时由 jQuery 设置，则处理程序需要是一个函数。thisthisfunction

但是，如果你有理由使用箭头（也许你想用它来表达箭头之外的意思），你可以用，而不是如果你喜欢的话：thise.currentTargetthis

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

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

68赞 Tyler Liu 3/27/2017 #4

另一个案例

meagar 的答案是正确的，我已经投了赞成票。

但是，还有另一种情况：

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

可以固定为：

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

这是jQuery中的一个历史错误，它将索引而不是元素作为第一个参数：

.each（函数）

function
Type：
要为每个匹配元素执行的函数。Function( Integer index, Element element )

请参见：https://api.jquery.com/each/#each-function

同时适用于和。.map( function ).filter( function )

将 jQuery $（this）与 ES6 箭头函数一起使用（词法 this 绑定）

Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

评论

评论

另一个案例

.each（函数）

评论

将 jQuery $（this） 与 ES6 箭头函数一起使用（词法 this 绑定）

Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

评论

评论

另一个案例

.each（ 函数 ）

评论

将 jQuery $（this）与 ES6 箭头函数一起使用（词法 this 绑定）

.each（函数）