イベント ハンドラーで ES6 アロー関数で jQuery の $(this) を正しく使用する方法は?

ES6 アロー関数で jQuery $(this) を使用する (字句 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'); }
    });
  }
}

Using event を使用してクリックされた要素にアクセスできます。 .currentTarget は、コールバック関数のバインディング コンテキストに関係なく、イベントをトリガーした要素へのアクセスを提供します。

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