では 関数リテラル（通常の function 式）とアロー関数の this の違い を初心者向けに、できるだけかみ砕いて説明します。実際にコードをブラウザで試すと理解が早いです。
1️⃣ 基本の考え方
- 通常の関数（function 式）
→ 呼ばれたときの「呼び出し元」によってthisが決まる - アロー関数（=>）
→ 作られたときの「周囲のスコープのthisをそのまま使う」
つまり、アロー関数は「自分専用の this を作らない」のが特徴です。
2️⃣ 例で比較
let obj = {
name: "太郎",
regularFunc: function() {
console.log("regularFunc:", this.name);
},
arrowFunc: () => {
console.log("arrowFunc:", this.name);
}
};
obj.regularFunc(); // → "太郎"
obj.arrowFunc(); // → undefined（ブラウザの場合）
解説：
regularFuncは obj のメソッドとして呼ばれたのでthis = obj→this.name = "太郎"arrowFuncはアロー関数で作られており、定義されたスコープのthisを使う
→ グローバルスコープだとthis.nameは undefined
3️⃣ setTimeout での違い
let obj = {
name: "花子",
regularFunc: function() {
setTimeout(function() {
console.log("regularFunc in setTimeout:", this.name);
}, 100);
},
arrowFunc: function() {
setTimeout(() => {
console.log("arrowFunc in setTimeout:", this.name);
}, 100);
}
};
obj.regularFunc(); // → undefined
obj.arrowFunc(); // → "花子"
解説：
regularFunc内の普通の function は「setTimeout によって呼ばれるときの this = window（ブラウザ）」arrowFunc内のアロー関数は「外側 regularFunc の this = obj」をそのまま使う →this.name = "花子"
4️⃣ まとめ（初心者が押さえるポイント）
| 種類 | this の決まり方 | メモ |
|---|---|---|
| 通常の関数 | 呼び出されたときのオブジェクト | メソッドやイベントで呼ぶと obj を指す |
| アロー関数 | 定義された時の外側の this | setTimeout や forEach 内などで便利 |
- ルール覚え方：「アロー関数は this を持たない → 外の this を使う」
- 小さなオブジェクトやイベントハンドラで試すと理解しやすいです。
💡 初心者向けヒント：
- メソッド内で this を使いたい場合 → 通常の function 式
- コールバックや setTimeout の中で親の this を使いたい場合 → アロー関数
