如何在 ES6 箭头函数中保留 `this` 与 jQuery 的 `$(this)` 的绑定？

在 ES6 箭头函数中使用 jQuery $(this) 保留词法 This 绑定

使用 jQuery 单击绑定时，开发人员可能会遇到问题当尝试将 ES6 箭头函数与词法 this 绑定一起使用时。这是因为 ES6 中的箭头函数按词法绑定 this，这可能会在使用 jQuery 时导致意外行为，因为 jQuery 需要具有不同 this 值的闭包。

在提供的示例中：

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

箭头函数在词法上绑定 this，导致 $(this) 引用 Game 对象而不是单击的元素。要解决此问题，需要使用 event.currentTarget 而不是 $(this)：

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

这可以确保 $(this) 正确引用被单击的元素，因为 jQuery 明确提供了 event.currentTarget 来处理 this 值可能不一致的情况。

理解词法绑定ES6

ES6 箭头函数具有词法 this 绑定，这意味着它们继承了周围上下文的 this 值。这既是有利的，也是具有挑战性的，因为它可以防止意外的绑定问题，但在使用回调时也需要仔细考虑。

结论

当使用 ES6 箭头函数时jQuery 单击绑定，重要的是要注意词法上的 this 绑定，并考虑使用 event.currentTarget 显式访问单击的元素。这可以确保正确的功能并防止由于改变此值而导致意外行为。

以上是如何在 ES6 箭头函数中保留 `this` 与 jQuery 的 `$(this)` 的绑定？的详细内容。更多信息请关注PHP中文网其他相关文章！