如何在事件处理程序中正确使用 jQuery 的 $(this) 和 ES6 箭头函数？

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

使用 ES6 箭头函数绑定事件处理程序可能会出现问题使用 jQuery 的 $(this) 选择器。这是因为箭头函数在词法上绑定了 this 关键字，这可能不是 jQuery 回调中所需的行为。

以下示例说明了该问题：

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

在上面的示例中，使用单击事件处理程序的箭头函数会导致 $(this) 引用 Game 实例而不是单击的元素。这是因为箭头函数没有自己的 this 绑定，因此它们从周围的作用域继承它。

解决方案

要解决此问题，请避免使用箭头函数绑定 jQuery 事件处理程序时。相反，使用传统的函数声明或使用 bind 方法显式绑定 this 关键字：

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

或者，您可以使用 event.currentTarget 访问单击的元素：

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

使用事件.currentTarget 提供对触发事件的元素的访问，无论回调函数的绑定上下文如何。

以上是如何在事件处理程序中正确使用 jQuery 的 $(this) 和 ES6 箭头函数？的详细内容。更多信息请关注PHP中文网其他相关文章！