JavaScript の「this」キーワードを理解する: 完全ガイド

JavaScript の this キーワードは、この言語の最も強力な側面の 1 つですが、よく誤解されています。その値は、関数がどこで定義されているかではなく、どのように呼び出されるかによって決定されるため、コード内のコンテキストを管理する上で非常に重要です。

このガイドでは、実際の例を使用してこれの微妙な違いを探り、呼び出し、適用、バインドを使用して明示的に制御する方法について詳しく説明します。

---

この基本

JavaScript では、これは現在コードを実行しているオブジェクトを指します。その値を決定するルールは、関数の呼び出しタイプによって異なります。

1. 暗黙的バインディング: これはメソッド呼び出しに先行するオブジェクトです。
2. 明示的なバインディング: これは、呼び出し、適用、またはバインドを使用して明示的に設定できます。
3. new Binding: コンストラクター関数では、これは新しく作成されたオブジェクトを参照します。
4. グローバル/ウィンドウ バインディング: 上記のルールがいずれも適用されない場合、デフォルトでグローバル オブジェクト (ブラウザーのウィンドウまたは Node.js のグローバル) が使用されます。

---

1. 暗黙的なバインディング: 呼び出し元からのコンテキスト

関数がオブジェクトのメソッドとして呼び出される場合、これはドットの前のオブジェクトを参照します。

この例では、car が呼び出し元であるため、this.model は car オブジェクトのモデル プロパティを指します。

---

2. 明示的バインディング: call、apply、bind の使用

この値を正確に制御する必要がある場合は、呼び出し、適用、またはバインドを使用できます。

ａ．電話

call メソッドは、指定された this 値と個々の引数を使用して関数を直ちに呼び出します。

ここでの呼び出しにより、 this.name が person オブジェクトの name プロパティを参照していることが確認されます。

b.適用する

apply メソッドは call に似ていますが、引数を個別にではなく配列として受け取ります。

これにより、渡す引数の配列がある場合に適用が特に便利になります。

c.バインド

バインド メソッドは、指定されたオブジェクトに永続的に設定された新しい関数を返し、遅延呼び出しを可能にします。

バインドを使用すると、特定のコンテキストに関連付けられた再利用可能な関数を作成できます。

---

3. 新しいバインディング: コンストラクター関数を使用したオブジェクトの作成

関数が new キーワードを使用して呼び出される場合、これは作成される新しいオブジェクトを参照します。

new オペレーターはこれを新しく作成されたオブジェクトに設定し、再利用可能なオブジェクト ブループリントを定義できるようにします。

---

4. グローバル/ウィンドウ バインディング: フォールバック

上記のルールがいずれも適用されない場合、デフォルトでグローバル オブジェクトが使用されます。ただし、厳密モード (「厳密を使用」) では、このような場合は未定義です。

グローバル バインディングは、意図しない動作を引き起こす可能性があるため注意してください。

---

呼び出し、適用、バインドの概要

簡単な比較は次のとおりです:

Method	Purpose	Execution	Argument Passing
call	Immediate invocation	Yes	Individually
apply	Immediate invocation	Yes	Array of arguments
bind	Delayed invocation (returns new function)	No	Individually or partially

---

結論

this キーワードをマスターすることは、クリーンでコンテキストを認識した JavaScript コードを作成するために不可欠です。暗黙的、明示的、新規、およびグローバル バインディングを理解することで、さまざまなシナリオにわたってこれを自信を持って管理できます。 call、apply、bind などのツールによりきめ細かい制御が可能になり、関数が柔軟で再利用可能になります。

Github Linkedin でフォローしてください

以上がJavaScript の「this」キーワードを理解する: 完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。