ES6 のアロー関数で「this」が期待どおりに動作しないのはなぜですか?

アロー関数と this

ES6 を使用して関数内にプロパティを組み込む場合、this オブジェクトにアクセスしようとすると問題が発生します。

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

ただし、このコードを実行すると、意図した名前が含まれず、「my name is」のみが出力されます。この問題は、アロー関数の固有の動作に起因します。

アロー関数には、バインドされた this、引数、またはその他の特別な名前がありません。オブジェクトが作成されると、これはオブジェクト内ではなく、それを囲むスコープ内に配置されます。これらのバリエーションのコードを調べると、問題がより明確になります:

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

、ES5 の矢印構文の曖昧な近似に変換する場合:

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

両方のインスタンスで、これはシャウト関数の場合、オブジェクトが追加されたときにオブジェクトに関連付けられた新しいスコープではなく、人物が定義されているスコープを指します。 person.

アロー関数は意図した動作を再現できませんが、ES6 はスペースを節約するためにメソッド宣言パターンを利用することで代替ソリューションを提供します。

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

以上がES6 のアロー関数で「this」が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。