JavaScriptの「この」キーワードを理解する

JavaScriptのthisキーワードは、現(xiàn)在の関數(shù)を?qū)g行しているオブジェクトを指します。その値は固定されておらず、関數(shù)の呼び出し方に応じて動的に変化します。 JavaScriptプログラミングの一般的なエラーを回避するために、この動的な動作を理解することが重要です。 thisの値は、コンパイル時間ではなく、実行時に決定されます。これは、関數(shù)が呼び出されるコンテキストに基づいてその値が決定されることを意味します。単一の靜的定義はありません。代わりに、4つの主要なコンテキストに依存します。

1. グローバルコンテキスト：非厳格なモード環(huán)境では、機能がオブジェクトに関連付けられずに呼び出された場合（たとえば、スタンドアロン関數(shù)呼び出し）、 thisしばしばグローバルオブジェクト（ブラウザのウィンドウ、またはnode.jsのグローバル）を參照します。 Strict Mode（ 'use strict'; ）では、 thisこのシナリオでundefinedなります。
2. メソッドコンテキスト：関數(shù)がオブジェクトのメソッドとして呼ばれる場合（例： object.method() ）、 thisオブジェクト自體を指します。これは最も一般的で簡単な使用法です。
3. コンストラクターのコンテキスト： newキーワードで呼ばれるコンストラクター関數(shù)內(nèi)で、 this新しく作成されたオブジェクトインスタンスを指します。これは、JavaScriptのオブジェクト指向プログラミングの基本です。
4. 明示的なバインディング： call() 、 apply() 、 bind()などのメソッドを使用して、 this値を明示的に設定できます。これらの方法により、指定されたthis値を使用して関數(shù)を呼び出し、デフォルトのコンテキスト決定をオーバーライドできます。

矢印機能とこの結(jié)合

はい、矢印関數(shù)（ => ）は、 thisバインディングを管理する上で大きな利點を提供します。通常の関數(shù)とは異なり、矢印関數(shù)には獨自のthisバインディングがありません。代わりに、彼らはthis周囲の（囲まれた）範囲に語彙的に結(jié)合します。これは、矢印関數(shù)內(nèi)のthisの値が、矢印関數(shù)が定義されている場所ではなく、呼び出された場所によって決定されることを意味します。この動作は、一般的なthis関連する落とし穴の多くを排除します。

例えば：

 <code class="javascript">const obj = { method: function() { setTimeout(function() { // Regular function, this will be the global object console.log(this); }, 1000); setTimeout(() => { // Arrow function, this will be obj console.log(this); }, 1000); } }; obj.method();</code>

このコードでは、通常のsetTimeoutコールバックがグローバルオブジェクトをログに記録する可能性がありますが、矢印関數(shù)コールバックはobjオブジェクトを正しくログにします。これは、矢印関數(shù)が周囲の範囲（ method関數(shù)）からthis値を継承するためです。

直接関數(shù)呼び出しとメソッドの呼び出し

thisの値は、関數(shù)がメソッドとして呼び出された場合に直接呼び出される場合に大きく異なります。

• 直接関數(shù)呼び出し：上記で説明したように、非ストライクモードでは、 thisしばしばグローバルオブジェクトを指します。厳密なモードでは、 undefined 。
• メソッドの呼び出し：関數(shù)がオブジェクトのメソッドと呼ばれる場合（例： myObject.myMethod() ）、 thisオブジェクト（この場合はmyObject ）を指します。

この例を考えてみましょう。

 <code class="javascript">function myFunction() { console.log(this); } const myObject = { myMethod: myFunction }; myFunction(); // this likely refers to the global object (or undefined in strict mode) myObject.myMethod(); // this refers to myObject</code>

複雑なアプリケーションで「これ」を管理します

大規(guī)模なJavaScriptアプリケーションでthis管理するには、慎重な計畫と一貫したコーディングプラクティスが必要です。いくつかの一般的な戦略は次のとおりです。

• 矢印関數(shù)：特にコールバックやイベントハンドラーで、可能な限り矢印関數(shù)を自由に使用して、 this拘束力のある問題を回避します。
• 明示的なバインディング（ .bind() 、. .call() 、. .apply() ）：これらのメソッドを使用して、必要に応じてthis値を明示的に設定します。特に関數(shù)をコールバックまたは引數(shù)として渡す場合。 bind() this値を永続的に結(jié)合した新しい関數(shù)を作成します。 call() and apply()指定されたthis値を使用してすぐに関數(shù)を呼び出します。
• クラス： ES6クラスを使用すると、オブジェクト指向のコード內(nèi)でthis管理するためのよりクリーンでより構(gòu)造化された方法が提供されます。クラスメソッド內(nèi)のthisキーワードは、クラスのインスタンスを正しく指します。
• コンテキスト保存ライブラリ： Lodashのような一部のライブラリは、コンテキストとコールバックをより効果的に管理するのに役立つユーティリティ関數(shù)を提供します。
• 一貫したコーディングスタイル：チーム內(nèi)でthis使用するための明確なガイドラインを確立して、一貫性を促進し、エラーを減らします?？赡埭扦ⅳ欷小?thisバインディングを暗黙的に頼ることを避けてください。明確さと予測可能性のために、明示的な結(jié)合または矢印機能を支持します。

これらの戦略を採用することにより、JavaScriptアプリケーションのthisキーワードに関連する予期しない動作のリスクを大幅に減らし、より堅牢で保守可能なコードにつながることができます。

以上が「これ」とは何ですかJavaScriptのキーワード、およびコンテキストに応じてその価値はどのように変化しますか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。