javascript - 将 jQuery $(this) 与 ES6 箭头函数结合使用(词法 this 绑定(bind))

Question

将 ES6 箭头函数与词法 this 绑定(bind)结合使用非常棒。

但是，我刚才在使用典型的 jQuery 单击绑定(bind)时遇到了一个问题:

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 忽略词法绑定(bind)的“$(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))通过 bind 到另一个上下文。