それでは JavaScript における this の挙動を体系的に整理してみましょう。グローバル・関数・メソッド・クラス・アロー関数など、状況ごとにどう変わるかをマップのようにまとめます。
1. グローバルスコープ
console.log(this);
- ブラウザ →
window - Node.js (strict mode) →
undefined
2. 通常の関数呼び出し
function show(){
console.log(this);
}
show();
- 通常モード → グローバルオブジェクト（ブラウザなら
window） - strict mode →
undefined
3. オブジェクトのメソッドとして呼び出し
let obj = {
value: 10,
show: function(){
console.log(this.value);
}
};
obj.show(); // → 10
thisは「呼び出したオブジェクト」を指す
4. コンストラクタ関数 / class
function Person(name){
this.name = name;
}
let p = new Person("Taro");
console.log(p.name); // → "Taro"
newを使うと、thisは新しく生成されたインスタンスを指す
class Person {
constructor(name){
this.name = name;
}
say(){
console.log(this.name);
}
}
let p = new Person("Hanako");
p.say(); // → "Hanako"
5. アロー関数
let obj = {
value: 42,
arrow: () => console.log(this.value)
};
obj.arrow(); // → undefined
- アロー関数は 自分自身の this を持たない
- 定義されたときのスコープの this を引き継ぐ
6. コールバックや非同期処理
function Timer(){
this.seconds = 0;
setInterval(function(){
this.seconds++; // thisはグローバル
}, 1000);
}
new Timer(); // NaN, NaN...
👉 アロー関数で解決：
function Timer(){
this.seconds = 0;
setInterval(() => {
this.seconds++; // thisはTimerインスタンス
}, 1000);
}
new Timer(); // 1, 2, 3...
✅ まとめマップ
| 文脈 | this が指すもの |
|---|---|
| グローバル | window / global（strictでは undefined） |
| 通常の関数呼び出し | グローバル（strictでは undefined） |
| オブジェクトのメソッド | 呼び出したオブジェクト |
| コンストラクタ / class | 新しいインスタンス |
| アロー関数 | 外側スコープの this を引き継ぐ |
| イベントリスナー (function式) | イベントを発生させた要素 |
| イベントリスナー (アロー関数) | 外側スコープの this（要素ではない） |
💡 ポイントは「function式は呼び出し方で this が変わる」「アロー関数は定義時に this が固定される」という2本柱です。