JavaScript のアロー関数は「this」バインディングをどのように処理しますか?またその回避策は何ですか?

アロー関数とバインディング: 'this' の動作をわかりやすく説明する

最新の JavaScript 機能であるアロー関数は、関数を宣言するための簡潔な構文を提供します。ただし、アロー関数と通常の関数の注目すべき違いの 1 つは、'this' バインディングに関する動作です。

アロー関数の'this' バインディング

アロー関数は、独自の 'this' バインディングを作成しません。 。代わりに、それを囲んでいるスコープから継承します。これは、アロー関数の 'this' が、周囲の関数またはグローバル スコープの 'this' と同じ値を参照することを意味します。

バインドされていない 'this' の例

提供された例を検討してください。質問内:

var f = () => console.log(this);

ここで、アロー関数 'f' の 'this' はバインドされていません。 「f」が呼び出されると、グローバル スコープの「this」バインディングが使用されます。これは通常、ウィンドウ オブジェクトを参照します。その結果、「fBound()」を呼び出すと、意図したとおり「o」オブジェクトではなくウィンドウ オブジェクトがログに記録されます。

アロー関数での「this」のバインディング

アロー関数はサポートしていません「bind」を使用した従来のバインディングですが、同様の機能を実現する別のアプローチもあります。

• 通常の使用関数: 通常の関数を仲介として定義し、アロー関数を返す前に「this」を目的のオブジェクトにバインドします:

var fBound = () => {
  console.log(this);
}.bind(o);

• ES6 クラスの使用: 必要な「this」バインディングを提供するクラスを定義し、アロー関数を次のように使用しますメソッド:

class MyClass {
  constructor() {
    this.f = () => console.log(this);
  }
}

const o = new MyClass();
o.f(); // logs the 'o' object

結論として、アロー関数には多くの利点がありますが、「this」バインディングに関しては通常の関数とは異なる動作をします。この違いを理解することで、アロー関数と代替アプローチを効果的に使用して、目的の「これ」バインディングを実現できます。

以上がJavaScript のアロー関数は「this」バインディングをどのように処理しますか?またその回避策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。