ホームページ > ウェブフロントエンド > jsチュートリアル > 「this」キーワードはさまざまな JavaScript コンテキストでどのように動作しますか?

「this」キーワードはさまざまな JavaScript コンテキストでどのように動作しますか?

DDD
リリース: 2024-12-28 18:08:18
オリジナル
208 人が閲覧しました

How Does the `this` Keyword Behave in Different JavaScript Contexts?

オブジェクト リテラル内: JavaScript の謎めいた「this」キーワードを明らかにする

オブジェクト リテラルの範囲内では、謎めいた「this」 " キーワードは JavaScript において非常に重要な意味を持ちます。その複雑さを掘り下げることで、その正確な役割とその動作を支配する要因を明らかにします。

1.バインディング ルール: コンテキストをわかりやすく理解する

JavaScript の「this」のバインディング ルールは従来の予想を覆し、他の多くの OO 言語とは大きく異なります。その動作は、コード内の関数の配置ではなく、関数の呼び出し方法によってのみ決まります。

2. This がコンストラクション ゾーンを支配するとき

コンストラクターとして呼び出された場合、「this」は新しく作成されたオブジェクト内で最上位に君臨します。新しく作成されたエンティティにバインドされ、そのプロパティとメソッドを管理します。

3.オブジェクト メソッド: this の領域

オブジェクト メソッドとして、「this」はそれを呼び出したオブジェクトを具体化します。その支配範囲はオブジェクトの内部プロパティにまで及び、オブジェクトの状態にアクセスして操作するために不可欠なツールとなっています。

4.系統的呼び出しなし: グローバルな抱擁

関数またはオブジェクト メソッドの外部で呼び出される場合、「this」はグローバル オブジェクトを抱擁し、事実上その代表になります。ブラウザでは、このグローバル オブジェクトは「ウィンドウ」として現れ、アプリケーションの環境を制御します。

5.イベント: 分散化された this

イベント ハンドラーでは、「this」は別の曲に合わせて踊ります。イベントをトリガーした DOM 要素にバインドし、そのプロパティとメソッドへのアクセスを提供します。ただし、DOM から切り離されたイベント (setTimeout など) の場合、「this」はグローバル オブジェクトに戻ります。

6. call()、apply(): this の錬金術

call() メソッドと apply() メソッドを使用すると、開発者は「this」を任意のオブジェクトに再割り当てできるようになり、メソッド呼び出しに無限の柔軟性が与えられます。これにより、呼び出し連鎖や継承エミュレーションなど、無数の可能性への扉が開かれます。

7. bind(): 最新の JavaScript の this

Function.bind() の新しいリーシュにより、「this」を特定のオブジェクトに明示的にバインドする機能が提供されます。この機能により、独自の「this」コンテキストを持つ独立した関数を作成できるようになり、コードの再利用性と保守性が促進されます。

8. Strict モード: グローバルからの脱却

Strict モードでは画期的なルールが導入されています。メソッドとして呼び出されない場合、または明示的にバインドされていない場合、「this」はグローバル オブジェクトを参照することが禁止されます。この変換により、コードの明瞭さが向上し、エラーの可能性が減ります。

9.アロー関数: これを再定義する

アロー関数は、「this」の動作に革命をもたらします。従来の関数とは異なり、宣言時に静的な「this」バインディングを確立します。このバインディングは親オブジェクトから発生し、ネストされた関数内であっても変更されません。

10.継承とアロー関数: 利益相反

アロー関数は、JavaScript における継承に対する課題を提示します。固有のこのバインディングにより、親オブジェクトからプロパティとメソッドを継承する機能が妨げられます。継承を実現するには、開発者は親オブジェクトからすべてのアロー関数をオーバーライドする必要があります。これは労力がかかり、エラーが発生しやすいタスクです。

In Summation

「this」キーワードJavaScript における は、オブジェクトまたは関数とその環境の間のパイプとして機能する、複雑ではありますが不可欠なツールです。バインディング ルールと呼び出しコンテキストによって制御されるその動作は、JavaScript コードの基礎となるダイナミクスを理解し、その可能性を最大限に活用するために非常に重要です。

以上が「this」キーワードはさまざまな JavaScript コンテキストでどのように動作しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート