如何在 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中文網其他相關文章！