アロー関数とこれ

この foo.baz() の結果はどうなりますか??

const foo = {
  bar: 10,
  baz: () => console.log(this.bar),
};


foo.baz();

この関数は機能するように見えますが、これを実行すると結果は「未定義」になります。なぜそうなるのでしょうか？
JavaScript では、アロー関数を使用すると、関数 console.log(this.bar) がグローバル変数を検索します。これは、「this」キーワードが周囲のオブジェクトではなく、ブラウザー内のグローバル オブジェクト (ウィンドウ) にバインドされているためです。 node.js環境。
この問題を解決するには、foo.bar を使用するか、コードを少し変更して so
のような正規関数式を使用します。

 baz: function () {
    console.log(this.bar);
  },

または、アロー関数を使用する必要がある場合は、ローカル変数を this.bar として呼び出す代わりに、オブジェクト名を使用して foo.bar のように呼び出すことができます。

 baz: () => console.log(foo.bar),

これで、出力は正しく 10 になります。

以上がアロー関数とこれの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。