`$(this)` が jQuery および ES6 のアロー関数で誤動作するのはなぜですか?

ES6 アロー関数で jQuery $(this) を使用する: 字句 This バインディング

ES6 アロー関数で jQuery の $(this) を使用する場合、開発者は、$(this) が self = this を使用して ES5 スタイルのクロージャに変換されるという問題に遭遇する可能性があります。この動作は、アロー関数の字句結合の性質によるものです。

問題:

次のコードは、この問題を示しています。

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

When代わりにアロー関数が使用されます:

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

$(this) は、 ES5 スタイルのクロージャーにより、予期せぬ動作が発生します。

解決策:

この問題は ES6 アロー関数の固有の特性であり、Traceur を使用して回避することはできません。これを解決するには、クリックされた要素へのアクセスにこれを使用しないようにする必要があります。代わりに、event.currentTarget プロパティを使用できます。

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

jQuery は、コールバック関数が別のコンテキストにバインドされているなど、外部要因によりこのバインディングがあいまいになる可能性がある状況に備えて、event.currentTarget を特別に提供します。 .bind() 経由。

以上が`$(this)` が jQuery および ES6 のアロー関数で誤動作するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。