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

Question

使用带有词法 this 绑定的 ES6 箭头函数非常棒。

但是，我刚才在使用典型的 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)”的方法吗？

原文由 JRodl3r 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 绑定到另一个上下文 --- 。

原文由 user229044 发布，翻译遵循 CC BY-SA 4.0 许可协议