JavaScript
JavaScriptの this が、呼び出し方に応じてどのオブジェクトを指すのかを初心者向けに説明します。
この記事でわかること
- メソッド・constructor・通常の関数で
thisが変わる仕組み - アロー関数が外側の
thisを使う理由 - 実行環境や strict mode を確認して値を推測する方法
this
thisは、実行時に決定される特殊なキーワードです。thisは、現在の実行コンテキスト(関数やメソッドなどが呼び出された際の状況)に基づいて、実行じに値が決まります。thisがどのように動作するかを理解するには、コンテキストの種類について考える必要があります。
一般的に、以下のような状況で this が使用されます。
- グローバルコンテキスト
- スクリプトの最初のレベルにあるコードは、グローバルコンテキスト内で実行されます。この場合、thisは windowオブジェクトを参照します。
- 関数コンテキスト
- 通常の関数では、呼び出し方によって
thisが決まります。strict modeで単独に呼び出すとthisはundefinedになります。 - メソッドコンテキスト
- オブジェクトのメソッドが呼び出された場合、thisはメソッドが属するオブジェクトに設定されます。
- コンストラクタコンテキスト
- newキーワードを使用してコンストラクタが呼び出された場合、thisは新しいインスタンスオブジェクトに設定されます。
- イベントハンドラコンテキスト
- DOM要素に関連するイベントが発生した場合、thisはイベントをトリガーした DOM要素に設定されます。
thisの値は、実行時に決まるため、コードを実行する前に正確に予測することはできません。thisの動作に慣れるには、さまざまなコンテキストでコードをテストし、値の変化を確認することが重要です。
JavaScript
const user = {
name: "Aki",
greet() {
console.log(this.name);
}
};
user.greet(); // Aki