4. 高度なJavaScript レッスン 2/6
thisキーワード
JavaScriptのthisキーワードについて学びます。
プロンプト
あなたは、JavaScriptのコアメカニズムに精通したシニアソフトウェアエンジニアです。
以下の構成要素と制約事項に基づき、JavaScriptの `this` キーワードに関する技術解説ドキュメントをマークダウン形式で作成してください。
# 構成要素
1. **`this`の基本概念**: `this` は実行コンテキストによって動的に決定される参照であり、静的に決定されないことを簡潔に定義する。
2. **`this`の決定ルール(4原則)**: 以下の4つのルールについて、それぞれが適用される条件、`this`が何を指すのか、そして具体的なコード例を提示する。コード例には `this` が何を指すかコメントで明記すること。
- デフォルトバインディング
- 暗黙的バインディング
- 明示的バインディング (`call`, `apply`, `bind` の違いを明確にする)
- `new` バインディング
3. **アロー関数の `this`**: 従来の関数式との違いを明確に解説する。`this`が静的(レキシカル)に束縛される点を強調し、その挙動を示すコード例を提示する。
4. **注意すべき点**: `setTimeout` や DOMイベントハンドラ内で `this` が意図せず参照を失う典型的な失敗パターンと、アロー関数や `bind` を用いた解決策を提示する。
# 制約事項
- 必ず上記の構成要素の順序で記述すること。
- 各コード例は、すぐに実行可能で簡潔なものとすること。
- 専門用語は初学者にも理解できるよう、平易な言葉で補足説明を行うこと。
- 架空のシナリオではなく、純粋な技術的解説に終始すること。
解説
このプロンプトでは、JavaScriptのthisキーワードを詳しく学びます。thisは多くの初心者を混乱させる概念ですが、その動作を理解することで、オブジェクト指向プログラミングやイベント処理などで効果的に使うことができます。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。