序章

JavaScript の楽しい世界に入り、「this」キーワードの秘密の力について学ぶ準備はできていますか? 「これ」という興味深い領域を巡る素晴らしい旅の準備をしましょう。そこでは、その動作の原因を明らかにし、コードの最大限の能力を実現します。魅力的な例と非常に明確な説明を備えたこのガイドは、「これ」のさまざまな束縛をスリリングに体験する旅にあなたを連れて行きます。この旅が終わる頃には、コーディングの困難に対処できるようになり、堅牢でスケーラブルなシステムを構築する自信が持てるようになります。それでは早速、コード ブーツを締めて、「これ」というキーワードの未知の領域を旅してみましょう。

JavaScript の「this」キーワードは、現在の関数がメソッドとなっているオブジェクトを指します。これは動的にスコープが指定される変数であり、実行時の関数呼び出しのコンテキストに応じてスコープが変化することを意味します。「これ」は、JavaScript における重要な概念ですが、よく誤解されています。その意味は、それが使用されるコンテキストに基づいて大幅に異なる可能性があるためです。

「これ」のバインディング

JavaScript の「this」キーワードには、デフォルト バインディング、暗黙的バインディング、明示的バインディング、新しいバインディングの 4 つの主なバインディングがあります。これらのバインディングを理解することは、JavaScript で「this」キーワードを効果的に利用するために不可欠です。バインディングはそれぞれ、特定のコンテキストで「this」がどのように使用されるべきかを指定するためです。

1. デフォルトのバインディング

「this」という用語が関数の外で使用される場合、または JavaScript のグローバル スコープ内で使用される場合、デフォルトでバインドされます。この例では、「this」はグローバル オブジェクトを指します。これは、ブラウザーの「ウィンドウ」または Node.js の「グローバル」のいずれかです。

以下に、実際のデフォルト バインディングの例を示します。

最初の console.log ステートメントでわかるように、上記の例の「this」キーワードは、関数の外部で使用される場合、グローバル オブジェクトを参照します。2 番目の console.log 文は、logThis 関数内で使用される場合、グローバル オブジェクトも参照することを示しています。

厳密モードでは、グローバル オブジェクトは未定義であり、グローバル スコープ内の「this」の値ではないことを覚えておくことが重要です。以下に示すように、コードの先頭または関数内に「use strict」を追加することで、strict モードを有効にできます。

2. 暗黙的なバインディング

このバインディングの「this」キーワードは、関数がプロパティであるオブジェクトを参照します。「this」はオブジェクトのメソッドとして関数を使用する場合にオブジェクトを指定します。関数がプロパティであるオブジェクトが「this」の値を決定します。

たとえば、

関数「greet 」は、上の例の「 person 」オブジェクトの属性です。person.greet() を呼び出すことで、「 person 」オブジェクトの name プロパティにアクセスできます。これにより、greet メソッド内の this の値が person オブジェクトに設定されます。この状況では、暗黙的なバインディングが見られます。暗黙的なバインディングをこれで説明します。

別の例を見てみましょう。

この例では、「instructor」オブジェクトに「sayName」関数がプロパティとして設定されており、instructor.say()が呼び出される際に「instructor 」オブジェクトが「 sayName」関数の「 this」の値として設定されます。。これは暗黙的なバインドのもう 1 つの例です。

3. 明示的なバインディング

コード内の関数の呼び出し方法や場所に関係なく、明示的なバインディング メソッドを使用して、呼び出しの「 this 」の値を明示的に設定できます。

JavaScript には、「call」、「apply」、「bind」という 3 つの明示的バインディングのメソッドが存在します。

「 call 」メソッドを使用して関数を呼び出すことができ、その関数呼び出しの「 this 」の値を設定することもできます。「 this 」に設定したい値はcallメソッドの第一引数で、その他の引数は個別に関数に渡されます。

たとえば次のとおりです。

上記の例では、 「call 」メソッドを使用して「 sayName 」関数を呼び出し、「 this 」の値がインストラクター オブジェクトに設定されています。

「 apply 」メソッドは「 call」と似ていますが、個々の引数ではなく引数の配列を受け入れる点が異なります。

例を見てみましょう:

上の例では、「apply」メソッドを使用して関数を呼び出し、「 thissayName 」の値を「 instructor 」オブジェクトに設定しました。関数への引数は配列として渡されます。

「bind」メソッドは、「bind」に渡された最初の引数を「this」の値として使用して新しい関数を作成します。「bind」に与えられた引数は、後で新しい関数が呼び出されたときに、元の関数内の「this」の値として設定されます。

以下に例を示します。

上記の例では、「bind 」メソッドを使用して、「 instructor 」オブジェクトに設定された「this 」を使用して新しい関数「instructorSayName 」を作成しました。後で関数「instructorSayName 」が呼び出されたとき、「 call」または「apply」を使用したかのように、 「 sayName 」関数内の「 this」の値が「 instructor 」オブジェクトに設定されました。

4. 新しいバインディング

「 new 」演算子を使用して関数が呼び出されたときに、「 this」キーワードが新しく構築されたオブジェクトにバインドされるプロセスは、 「 new」バインディングと呼ばれます。

「 new 」演算子を使用して関数を呼び出すと、新しいオブジェクトが作成され、関数内の「 this 」キーワードがこの新しく作成されたオブジェクトに設定されます。さらに、新しく作成されたオブジェクトのプロトタイプは、関数のプロトタイプ プロパティに設定されます。

たとえば次のとおりです。

上の例では、「 new 」演算子を使用して「 person 」関数を呼び出すことにより、新しいオブジェクトが作成されます。プロパティ「name」および「greet」がオブジェクトに追加され、 「 person 」関数内の「 this」キーワードが新しく生成されたオブジェクトに設定されます。

「new」演算子を使用して関数を呼び出すと、「return」ステートメントを必要とせずに、新しく作成されたオブジェクトが返されることに留意することが重要です。「return」ステートメントが使用され、オブジェクトが返される場合、新しく作成されたオブジェクトの代わりにそのオブジェクトが返されます。「return」ステートメントが使用され、オブジェクト以外の値が返された場合でも、新しく作成されたオブジェクトが返されます。

アロー関数と「this」

JavaScript のアロー関数は、匿名関数 (名前のない関数) を作成するためのショートカットを提供します。「this」キーワードをバインドする方法が、従来の関数式とは一線を画しています。

従来の関数式における「this」の値は、関数の呼び出し方法によって異なります。前に説明したように、「call」、「apply」、または「bind」コマンドを使用して明示的に設定することも、関数を含むオブジェクトに応じて暗黙的に設定することもできます。

ただし、アロー関数では、アロー関数の呼び出し方法ではなく、アロー関数が生成されたコンテキストが「this」の値を決定します。これは、アロー関数が別の関数内にない場合、アロー関数内の「this」キーワードは常に外部関数またはグローバル オブジェクトの「this」値を参照することを意味します。

簡単に言えば、アロー関数には独自の「this」値がありません。代わりに、外側のスコープから「this」値を継承します。

例えば：

以下は、外部関数の「this」キーワードを参照するアロー関数の別の例です。

上の例では、この例の「 greet 」関数は「 person」関数内のアロー関数として定義されています。arrow 関数の「this 」値は、「 greet」関数が呼び出されたときに新しく生成されたオブジェクト「 elie」に割り当てられた「person」関数の「this 」値に対応します。

「call」、「apply」、または「bind」を使用しても、アロー関数の「this」バインディングを変更できないことに言及しています。関数の呼び出しに使用されるメソッドに関係なく、アロー関数内の「this」値は同じままです。このため、アロー関数は、「this」の値が頻繁に予期せず変更されるコールバックやイベント ハンドラーにとって特に有益です。

結論

結論として、JavaScript の「this」キーワードを学習することは、真の JavaScript エキスパートになるための重要なステップです。この本質的でありながらしばしば混乱を招く概念は、コードの成否を左右するものであり、言語の機能を最大限に活用するための鍵となります。「これ」の 4 つの基本バインディングであるデフォルト バインディング、暗黙的バインディング、明示的バインディング、新しいバインディングを十分に理解していれば、より効率的であるだけでなく、よりエレガントで動的なコードを作成できるようになります。 。プロジェクトや要件の変化に応じて成長および進化できる、柔軟で適応性のあるスケーラブルなコードを開発できる機能により、直面するあらゆる課題に取り組むことが可能になります。したがって、「this」キーワードを採用し、マスターして、真の JavaScript 忍者になりましょう。