従来の関数と比較して、ES6 のアロー関数では「this」キーワードの動作がどのように異なりますか?

アロー関数とこれ

ES6 では、アロー関数は関数を定義するための簡潔な構文を提供します。ただし、その動作は、this キーワードの処理方法において従来の関数とは異なります。

次のコードを考えてみましょう:

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

ここでは、次の場合に "my name is jason" をログに記録することを目的としています。 person.shout() が呼び出されます。ただし、出力は「私の名前は未定義です」となります。これは、アロー関数には独自の this バインディングがないためです。代わりに、外側のスコープから this 値を継承します。

この場合、外側のスコープはグローバル スコープであり、this はウィンドウ オブジェクトを参照します。 window オブジェクトには name プロパティがないため、this.name 式は未定義と評価されます。

この問題を解決するには、アロー関数がこれをバインドしないという事実を利用できます。アロー関数をオブジェクト リテラル内に直接配置することで、オブジェクトから正しい this 値を継承できます:

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

または、関数キーワードと : 構文を使用せずに ES6 メソッド宣言を使用できます:

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

これらのテクニックを活用すると、アロー関数内でこれを効果的に使用し、目的の出力を実現できます。

以上が従来の関数と比較して、ES6 のアロー関数では「this」キーワードの動作がどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。