ES6 アロー関数内で jQuery の `$(this)` との `this` バインディングを保持するにはどうすればよいですか?

ES6 の矢印関数での jQuery $(this) による字句 This バインディングの保持

jQuery クリック バインディングを使用する場合、開発者は問題が発生する可能性がありますES6 アロー関数を字句 this バインディングで使用しようとするとき。これは、ES6 のアロー関数がこれを字句的にバインドするためです。これにより、別の this 値を持つクロージャーを期待する jQuery を使用するときに予期しない動作が発生する可能性があります。

提供された例では:

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

アロー関数は this を字句的にバインドしているため、$(this) はクリックされた要素ではなく Game オブジェクトを参照します。この問題を解決するには、$(this):

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

の代わりにevent.currentTargetを使用する必要があります。これにより、jQueryが明示的にevent.currentTargetを提供するため、$(this)がクリックされた要素を正しく参照することが保証されます。 this 値が一貫していない可能性があるシナリオを処理します。

字句バインディングについてES6

ES6 アロー関数には字句的な this バインディングがあり、周囲のコンテキストの this 値を継承します。これは、偶発的なバインディングの問題を防ぐことができるため、有利であると同時に困難でもありますが、コールバックを使用する場合には慎重な考慮が必要です。

結論

ES6 アロー関数を使用する場合jQuery のクリック バインディングでは、語彙的な this バインディングに注意し、クリックされた要素に明示的にアクセスするためにevent.currentTarget の使用を検討することが重要です。これにより、正しい機能が確保され、この値の変更による予期せぬ動作が防止されます。

以上がES6 アロー関数内で jQuery の `$(this)` との `this` バインディングを保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。