字句結合は ES6 アロー関数の「this」キーワードにどのような影響を与えますか?

ES6 のアロー関数における "this" の字句結合を理解する

JavaScript の領域では、アロー関数は "this" の表現方法に微妙だが影響力のある変更を導入します。キーワードが動作します。従来の関数宣言とは異なり、アロー関数は、スコープ内の "this" の値を制御する概念である字句バインディングを示します。

字句バインディングとは?

字句バインディング「this」の値が関数の字句環境、つまり関数が定義されているスコープによって決定されるメカニズムを指します。対照的に、従来の関数は動的バインディングを使用し、関数が外部スコープ内で定義されている場合でも、「this」の値は呼び出し元のコンテキストによって決定されます。

アロー関数の影響

アロー関数は字句的にバインドされており、周囲のコンテキストから「this」値を継承します。簡単に言うと、アロー関数内の「this」は常にアロー関数定義を含むオブジェクトを指します。

例

次のコード スニペットを考えてみましょう。

var testFunction = () => {
  console.log(this)
};
testFunction();

この例では、アロー関数内の "this" はグローバル オブジェクト (ブラウザーのウィンドウ) を指します。これは、アロー関数がグローバル スコープ内で定義され、そのスコープの "this" 値を継承するためです。

従来の関数との対照

従来の関数宣言一方、動的バインディングを使用します。従来の関数がオブジェクト内で定義されている場合、呼び出しコンテキストに関係なく、関数が呼び出されるとき、「this」はそのオブジェクトを参照します。

たとえば、次のコード スニペットは動的バインディングを示しています。

var person = {
  name: 'John',
  greet: function() {
    console.log(this.name)
  }
};
person.greet(); // logs 'John'

対照的に、greet メソッドにアロー関数を使用する場合:

var person = {
  name: 'John',
  greet: () => {
    console.log(this.name)
  }
};
person.greet(); // logs undefined

アロー関数は字句的にバインドされているため、 "this" は person オブジェクトではなくグローバル オブジェクトを参照するため、未定義の出力が生成されます。

字句バインディングの応用

矢印の "this" の字句バインディング関数は、特に非同期操作とイベント処理に重大な影響を及ぼします。アロー関数は、周囲のコンテキストから「this」値を継承することにより、メソッド呼び出しとイベント コールバックに対して正しいオブジェクトが維持されるようにします。

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