JavaScriptのthisを理解する｜関数やイベントでの挙動を整理
JavaScriptのコードを読み書きする際、「this」が何を指しているのか分かりにくい場面は多くあります。
thisは文脈によって参照先が変わる特徴を持つため、挙動を正しく理解することで関数処理やイベントハンドリングをより扱いやすくなります。
本記事では、基本ルールから関数・イベント・クラスまで、thisの挙動を体系的に整理します。
thisの基本的な考え方
JavaScriptのthisは、「そのコードを実行している主体」 を指します。
ただし、どの主体が実行しているかは書き方によって大きく異なるため、まずは代表的なルールを確認します。
1. グローバルコンテキストでのthis
ブラウザ環境でのグローバルスコープでは、thisは windowオブジェクト を指します。
console.log(this); // windowモジュールスコープ（ES Modules）ではundefinedになるなど、環境によって差があるため注意が必要です。
2. 関数内でのthisの挙動
● 通常の関数（function）
通常の関数では、thisは 呼び出し方によって変わる という特徴があります。
function show() {
console.log(this);
}
show(); // window（strict mode では undefined）メソッドとして呼ぶ場合は、そのメソッドを持つオブジェクトがthisになります。
const obj = {
name: "sample",
show() {
console.log(this);
}
};
obj.show(); // obj が this● アロー関数のthis
アロー関数では、thisは 外側のスコープを引き継ぐ（レキシカルスコープ） という性質があります。
const obj = {
value: 1,
show: () => {
console.log(this);
}
};
obj.show(); // window（obj ではない）アロー関数はthisが固定されるため、コールバックでの利用に適した書き方です。
3. イベント内でのthisの挙動
DOMイベントリスナーでは、thisは通常 イベントが発火した要素 を指します。
button.addEventListener("click", function () {
console.log(this); // クリックされた button 要素
});一方、アロー関数ではthisが固定されるため、イベント要素にはなりません。
button.addEventListener("click", () => {
console.log(this); // window
});要素自身を扱いたい場合は function を使うと明確に制御できます。
4. call / apply / bind によるthisの制御
関数を実行する際に、thisを任意のオブジェクトに切り替えることもできます。
● call
function show() {
console.log(this.name);
}
const obj = { name: "JavaScript" };
show.call(obj); // "JavaScript"● apply
callと似ていますが、引数を配列で渡します。
● bind（thisの固定）
bindは関数のthisを固定した新しい関数を返します。
const bound = show.bind(obj);
bound(); // "JavaScript"イベントでメソッドを渡す場合などに便利な方法です。
5. クラスでのthis
クラス構文では、thisは インスタンス自身 を指します。
class User {
constructor(name) {
this.name = name;
}
show() {
console.log(this.name);
}
}
const u = new User("Taro");
u.show(); // Taroただしメソッドをイベントに直接渡すとthisが失われることがあるため、bindによる固定がよく使われます。
よくある混乱ポイントと回避方法
● アロー関数の多用でthisが意図しない値になる
→ DOMイベントやメソッド定義では function を使うと明確に制御できる。
● コールバックでthisが変化する
→ bindを使いthisを固定することで防止できる。
● クラス内メソッドをイベントにそのまま渡すとthisが変わる
→ constructorでbindするか、クラスフィールド構文でアロー関数化する。
thisを理解するためのまとめ
- thisは「どの文脈で実行されたか」を指す
- 通常関数：呼び出し方で変わる
- アロー関数：外側のthisを引き継ぐ
- イベント：function は要素、アロー関数は外側のthisを持つ
- call / apply / bind で任意のthisを設定できる
- クラスではインスタンスがthisになるが、イベント渡しに注意が必要
挙動を文脈ごとに整理すると、コードの意図が把握しやすくなります。
関連記事
JavaScript・DOM操作の基礎理解を深める場合は、以下の記事も参考になります。
関連する概念を組み合わせて学ぶことで、よりスムーズなフロントエンド実装が可能になります。