アロー関数のthisを初心者向けにやさしく解説
JavaScriptを学び始めると「thisってややこしい！」と感じる人が多いです。特にアロー関数は、普通の関数とthisの動きが違うので混乱しやすいポイントです。ここでは、かみ砕いて説明します。
基本の考え方
- 普通の関数
thisは「呼び出し方」で決まります。
→ どのオブジェクトから呼ばれたかによって変わる。 - アロー関数
thisは「書かれた場所」で決まります。
→ 外側のスコープのthisをそのまま引き継ぐ（固定される）。
例1: 普通の関数とアロー関数の違い
const obj = {
name: "Alice",
normalFunc: function() {
console.log(this.name);
},
arrowFunc: () => {
console.log(this.name);
}
};
obj.normalFunc(); // "Alice"
obj.arrowFunc(); // undefined（外側のthisを参照するため）
normalFuncは「objから呼ばれた」のでthisはobj。arrowFuncは「objの中に書いてあるけど、thisは外側（グローバル）」を参照するのでundefined。
例2: setTimeoutでの違い
function Timer() {
this.seconds = 0;
// 普通の関数
setInterval(function() {
this.seconds++;
console.log("普通:", this.seconds);
}, 1000);
// アロー関数
setInterval(() => {
this.seconds++;
console.log("アロー:", this.seconds);
}, 1000);
}
new Timer();
- 普通の関数 →
thisはsetIntervalが呼び出すときのthis（グローバル）になるので、this.secondsはエラーやNaNになる。 - アロー関数 → 外側の
this（Timerインスタンス）をそのまま使うので、秒数が正しくカウントされる。
例3: イベントリスナーでの違い
const button = document.querySelector("button");
// 普通の関数
button.addEventListener("click", function() {
console.log(this); // クリックされたbutton要素
});
// アロー関数
button.addEventListener("click", () => {
console.log(this); // 外側のthis（windowなど）
});
- イベントで「クリックされた要素」を
thisで使いたいなら普通の関数。 - 外側の
thisをそのまま使いたいならアロー関数。
まとめ（使い分けのコツ）
- アロー関数を使うと便利な場面
- コールバック関数（
setTimeout,setInterval,Promise.thenなど） - クラスのメソッド内で「外側のthisを保持したい」とき
- コールバック関数（
- 普通の関数を使うべき場面
- オブジェクトのメソッド
- イベントリスナーで
thisを要素として使いたいとき call/apply/bindでthisを切り替えたいとき
👉 初心者向けに一言でまとめると：
「アロー関数のthisは外側に固定される。普通の関数のthisは呼び出し方で変わる」
これを頭に入れておけば、だいぶスッキリ理解できます。