为什么使用 ES6 箭头函数的 jQuery 单击处理程序中的 `$(this)` 会失败？

ES6 箭头函数和 jQuery $(this)：绑定混乱

ES6 箭头函数提供词法 this 绑定，通过消除需要来简化代码用于显式的bind()调用。但是，当与 jQuery 的单击绑定一起使用时，此行为可能会导致问题。

箭头函数的意外行为：

考虑以下代码：

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

使用箭头函数代替：

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

$(this) 引用转换为 ES5 风格的闭包（self = this）。

理解 ES6 箭头函数绑定：

此行为是 ES6 箭头固有的函数，而不是 Traceur 翻译的问题。箭头函数总是在词法上将 this 绑定到封闭的上下文。在本例中，为 foo() 方法。

使用 event.currentTarget 的解决方案：

要解决此问题，请使用 event.currentTarget 而不是 $(this)在箭头函数回调中访问被点击的元素：

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

jQuery 特别提供了 event.currentTarget 来适应情况其中回调函数可能无法访问正确的 this 上下文。

以上是为什么使用 ES6 箭头函数的 jQuery 单击处理程序中的 `$(this)` 会失败？的详细内容。更多信息请关注PHP中文网其他相关文章！