アロー関数は JavaScript の「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

意図した結果は「私の名前はジェイソンです」と出力することですが、コンソールには「私の名前」のみが出力されます は。"これは、アロー関数が「this」バインディングの点で従来の関数とは異なる動作をするためです。

説明:

従来の関数とは異なり、アロー関数は「this」バインディングをバインドしません。 this' キーワードを包含スコープに追加します。代わりに、周囲のコンテキストから「this」バインディングを継承します。上の例では、アロー関数の「this」は、「person」オブジェクトではなく、グローバル オブジェクトを参照しています。

解決策:

いくつかあります。この問題に対処する方法:

1. バウンドを使用する機能:

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. 従来の機能を使用:

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. を使用ES6メソッド宣言:

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

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

「this」バインディングに関するアロー関数のさまざまな動作を理解することで、ES6 で効果的で柔軟なコードを書くことができます。

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