jQuery クリック ハンドラーと ES6 アロー関数で `$(this)` を正しく使用する方法

jQuery $(this) と ES6 アロー関数

ES6 アロー関数は語彙的な this バインディングを提供しますが、一緒に使用すると課題が生じる可能性があります。 jQuery クリック バインディング。このシナリオでアロー関数を使用すると、$(this) の動作が異なり、基本的に ES5 クロージャーの動作をエミュレートします:

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

この問題に対処するには、Traceur には $( を無視する機能がないことを理解することが重要です。 this) このコンテキストにおける字句バインディング用。 ES6 はアロー関数の動作を決定しており、本質的にレキシカル this へのアクセスが不足しています。

解決策は、$(this):

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

jQuery がイベントを提供する代わりに、event.currentTarget を使用することにあります。 .currentTarget は特にこの目的のために使用されます。これは、字句へのアクセスがコールバック関数では常に実現可能であるとは限らないことを認識しているためです。 event.currentTarget を利用することで、正しい要素がターゲットとなり、このバインディングを変更したり、ES5 コードへの依存関係を導入したりする必要がなくなります。

以上がjQuery クリック ハンドラーと ES6 アロー関数で `$(this)` を正しく使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。