JavaScript のアロー関数と通常の関数では、「this」キーワードはどのように異なりますか?

アロー関数とコンテキストのない「This」

ES6 では、アロー関数は関数宣言の簡潔な構文を提供します。ただし、アロー関数と従来の関数の大きな違いの 1 つは、「this」キーワードの処理です。

指定されたコードに示すように、オブジェクト内でアロー関数を使用する場合:

var person = {
  name: "jason",

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

アロー関数内の「this」キーワードは「person」オブジェクトを参照していません。代わりに、アロー関数が作成されたスコープ (この場合はグローバル スコープ) を指します。したがって、「person.shout()」を呼び出すと、「jason」プロパティなしで「my name is」が記録されます。

この問題を解決するには、アロー関数の代わりに通常の関数構文を使用できます。

var person = {
  name: "jason",

  shout: function() {
    console.log("my name is ", this.name)
  }
}

通常の関数では、「this」は関数を所有するオブジェクトを指します。したがって、呼び出されたときに「my name is jason」が正しく出力されます。

または、アロー関数の構文に似た ES6 メソッド宣言構文を利用することもできます。

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name)
  }
}

この構文では、関数宣言でコロン (:) と "function" キーワードが省略されます。ただし、依然として通常の関数宣言構文を使用し、「this」がオブジェクトにバインドされていることを確認します。

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