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