ホームページ >ウェブフロントエンド >jsチュートリアル >「this」キーワードが通常の関数とアロー関数で異なる動作をする理由
JavaScript の this キーワードは、通常の関数とアロー関数で動作が異なるため、混乱を招く可能性があります。このブログ投稿では、これが両方のタイプの関数でどのように機能するかを説明し、これらの違いが存在する理由を探り、JavaScript でこれを理解するために必要な基本的な知識を提供します。
JavaScript の通常の関数は、function キーワードを使用して定義されます。これらの関数の this の値は、関数の呼び出し方法によって異なります。以下にいくつかの例を示します:
function regularFunction() { console.log(this); } regularFunction(); // Logs the global object (window in browsers)
説明: 非厳密モードでは、関数がグローバル コンテキスト (オブジェクトのメソッドとしてではなく) で呼び出される場合、これはグローバル オブジェクト (ブラウザーのウィンドウまたはノードのグローバル) を参照します。 .js).
'use strict'; function regularFunction() { console.log(this); } regularFunction(); // Logs undefined
関数がオブジェクトのメソッドとして呼び出される場合、これはそのオブジェクトを参照します。
const obj = { method: function() { console.log(this); } }; obj.method(); // Logs obj
説明: この場合、関数は obj のメソッドとして呼び出されるため、これは obj を指します。
関数がコンストラクターとして使用される場合 (new キーワードで呼び出される)、これは新しく作成されたインスタンスを参照します。
function Person(name) { this.name = name; this.sayHello = function() { console.log(`Hello, my name is ${this.name}`); }; } const person1 = new Person('Alice'); person1.sayHello(); // Logs "Hello, my name is Alice" const person2 = new Person('Bob'); person2.sayHello(); // Logs "Hello, my name is Bob"
説明: new を使用して呼び出された場合、Person コンストラクター関数内の this は、作成される新しいインスタンスを参照します。新しいインスタンス (person1 と person2) はそれぞれ、独自の name プロパティと SayHello メソッドを取得します。
呼び出し、適用、またはバインドを使用してこれを明示的にバインドできます。
function regularFunction() { console.log(this); } const obj = { value: 42 }; regularFunction.call(obj); // Logs obj regularFunction.apply(obj); // Logs obj const boundFunction = regularFunction.bind(obj); boundFunction(); // Logs obj
説明: call and apply は、この関数を obj に設定して即座に呼び出しますが、bind はこれを obj に永続的にバインドした新しい関数を作成します。
ES6 で導入されたアロー関数には、独自の this コンテキストがありません。代わりに、周囲の (語彙) スコープからこれを継承します。これにより、特定の状況で矢印関数が便利になります。
アロー関数は、定義されているスコープからこれを継承します。
const arrowFunction = () => { console.log(this); }; arrowFunction(); // Logs the global object (window in browsers)
説明: アロー関数には独自の this がありません。彼らはこれを周囲のスコープから使用します。ここでは、関数がグローバル スコープで定義されているため、グローバル オブジェクトを参照します。
'use strict'; const arrowFunction = () => { console.log(this); }; arrowFunction(); // Logs undefined
通常の関数とは異なり、アロー関数はメソッドとして呼び出されたときに独自の this を取得しません。これらは、これを囲んでいるスコープから継承します。
const obj = { method: () => { console.log(this); } }; obj.method(); // Logs the global object (window in browsers) or undefined in strict mode
説明: アロー関数は独自の this をバインドせず、字句スコープから継承します。この例では、これは、obj.
ではなく、グローバル オブジェクト、または厳密モードの未定義を参照します。アロー関数が別の関数内で定義されている場合、その関数は外側の関数からこれを継承します。
function outerFunction() { const arrowFunction = () => { console.log(this); }; arrowFunction(); } const obj = { value: 42, outerFunction: outerFunction }; obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction
説明: この場合、アロー関数内の this は、outerFunction と同じ this (obj) を参照します。
イベント ハンドラーのアロー関数は、イベントをトリガーする要素からではなく、周囲の字句スコープからこれを継承します。
const button = document.querySelector('button'); button.addEventListener('click', () => { console.log(this); }); // Logs the global object (window in browsers) or undefined in strict mode
Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.
The difference between regular functions and arrow functions lies in how they handle this:
To understand the behavior of this in JavaScript, you need to know the following concepts:
Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.
以上が「this」キーワードが通常の関数とアロー関数で異なる動作をする理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。