为什么 `$(this)` 在 jQuery 和 ES6 箭头函数中表现不佳？

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

当将 jQuery 的 $(this) 与 ES6 箭头函数一起使用时，开发人员可能会遇到这样的问题：使用 self = this 将 $(this) 转换为 ES5 风格的闭包。此行为是由于箭头函数的词法绑定性质造成的。

问题：

以下代码演示了该问题：

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风格的闭包，导致意外行为。

解决方案：

这个问题是ES6箭头函数的固有特征，无法使用Traceur绕过。要解决此问题，必须避免使用它来访问单击的元素。相反，可以使用 event.currentTarget 属性：

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

jQuery 专门提供了 event.currentTarget 来应对由于外部因素导致 this 绑定可能不明确的情况，例如回调函数被绑定到另一个上下文通过 .bind().

以上是为什么 `$(this)` 在 jQuery 和 ES6 箭头函数中表现不佳？的详细内容。更多信息请关注PHP中文网其他相关文章！