this の扱い（関数とアロー関数）
JavaScript の this は「その関数が呼ばれたときに参照するオブジェクト」を指します。
ただし 通常の関数 と アロー関数 では挙動が違うため、初心者が混乱しやすいポイントです。
基本のコード例
function f() {
console.log(this);
}
const a = () => {
console.log(this);
};
f(); // 呼び出し方によって this が変わる
a(); // アロー関数は外側の this をそのまま使う
通常の関数 (function)
- 呼び出し方によって
thisが変わる- グローバルで呼ぶ →
window（ブラウザ）やglobal（Node.js） - オブジェクトのメソッドとして呼ぶ → そのオブジェクト
newで呼ぶ → 新しく作られたインスタンス
- グローバルで呼ぶ →
例
function f() {
console.log(this);
}
f(); // グローバルオブジェクト（ブラウザなら window）
const obj = { f };
obj.f(); // obj が表示される
new f(); // f のインスタンス（空オブジェクト）が表示される
アロー関数 (()=>{})
- アロー関数は「自分の this」を持たない
- 外側のスコープの
thisをそのまま使う（レキシカルスコープ）
例
const obj = {
name: "Aki",
normal: function() {
console.log("normal:", this.name);
},
arrow: () => {
console.log("arrow:", this.name);
}
};
obj.normal(); // "normal: Aki"
obj.arrow(); // "arrow: undefined" （外側の this を参照するため）
よく使うテンプレート集
イベントハンドラでの違い
<button id="btn">クリック</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
console.log("function:", this); // ボタン要素
});
btn.addEventListener("click", () => {
console.log("arrow:", this); // 外側の this（通常は window）
});
</script>
クラス内での利用
class Counter {
constructor() {
this.count = 0;
}
incNormal() {
setTimeout(function() {
this.count++;
console.log("normal:", this.count); // this は undefined またはグローバル
}, 1000);
}
incArrow() {
setTimeout(() => {
this.count++;
console.log("arrow:", this.count); // this は Counter インスタンス
}, 1000);
}
}
const c = new Counter();
c.incNormal(); // エラーや NaN
c.incArrow(); // 正しくカウントアップ
例題: タイマーで this を使う
function Timer() {
this.sec = 0;
// 通常の関数 → this が変わる
setInterval(function() {
this.sec++;
console.log("function:", this.sec);
}, 1000);
// アロー関数 → 外側の this を保持
setInterval(() => {
this.sec++;
console.log("arrow:", this.sec);
}, 1000);
}
new Timer();
- 効果: 通常の関数では
thisがタイマーのインスタンスを指さず、NaNになる。 - アロー関数では正しく
this.secが増える。
実務でのコツ
- メソッドには通常の関数を使う →
thisがオブジェクトを指す。 - コールバックや非同期処理にはアロー関数が便利 → 外側の
thisを保持できる。 - イベントハンドラ:
functionを使うと要素を参照できる。アロー関数だと外側のthis。 - クラス: メソッド内で
thisを使うならアロー関数でコールバックを書くと安全。
練習問題（オブジェクトのメソッド）
const obj = {
name: "Mika",
normal: function() {
console.log("normal:", this.name);
},
arrow: () => {
console.log("arrow:", this.name);
}
};
obj.normal(); // "normal: Mika"
obj.arrow(); // "arrow: undefined"
- 効果:
functionはオブジェクトを指すが、アロー関数は外側のthisを参照するためundefined。
直感的な指針
- 通常の関数 → 呼び出し方で
thisが変わる。 - アロー関数 → 外側の
thisをそのまま使う。 - イベントや非同期処理ではアロー関数が便利。
- オブジェクトのメソッドは通常の関数で書くのが基本。
これを覚えれば「this がどこを指すか」を理解でき、イベント処理やクラス設計で迷わなくなります。