JavaScript のクラス メソッド内の "this" の動作を理解する

JavaScript では、クラス定義内でメソッドがどのように動作するかを理解するために、「this」の概念が重要です。このトピックを詳しく調べるために、「this」がクラス メソッドの呼び出し時に作成されるオブジェクトではなく、呼び出し元クラスを参照するというステートメントを分析してみましょう。

呼び出しパターンと「this」バインディング

In JavaScript では、関数を呼び出す 4 つの異なる方法があり、それぞれが「this」がどのようにバインドされるかを決定します:

1. メソッド呼び出し: 関数がオブジェクトのメソッドとして呼び出される場合、「this」はそのオブジェクトにバインドされます。
2. 関数呼び出し: スタンドアロン関数呼び出しでは、「this」 " はグローバル オブジェクト (通常はブラウザの「ウィンドウ」オブジェクト) にバインドされます。
3. Constructor呼び出し: 「new」キーワードを使用して呼び出された関数は、コンストラクター呼び出しとみなされます。この場合、「this」は新しく作成されたオブジェクトにバインドされます。

例を理解する

コード例では、複数のオブジェクトを作成するクラス定義内のメソッドについて言及しました。オブジェクトリテラル表記を使用します。これらのオブジェクト内では、「this」ポインタが使用されます。あなたが観察した動作は、おそらく onRender メソッドの呼び出しパターンに由来しています。

onRender メソッドがクラス インスタンスのメソッドとして呼び出された場合 (メソッド呼び出し)、「this」は次のようにクラス インスタンスを参照します。望ましい動作です。ただし、onRender がクラス インスタンスのコンテキスト外で誤って関数として呼び出された場合 (関数呼び出し)、「this」は意図したクラス インスタンスではなくグローバル オブジェクトにバインドされます。これにより、予期しない動作が発生する可能性があります。

「this」の動作の理由

「this」を呼び出し元のオブジェクトまたは関数にバインドすることは、JavaScript の設計の基本的な側面です。これにより、呼び出しパターンに応じて「this」のコンテキストを操作できる、動的で柔軟なコードの作成が可能になります。

結論

クラス メソッド内での「this」の動作は、次のとおりです。 JavaScript の関数呼び出しパターンの結果。さまざまなシナリオで「this」がどのようにバインドされるかを理解することで、コードが動作するコンテキストを制御し、潜在的な混乱を避けることができます。