では「クラスのメソッドでイベントリスナーを登録する場合の this の扱い」を見ていきましょう。ここは function 式とアロー関数の違いが特に重要になります。
例1：function式を使った場合
<button id="btn1">クリック</button>
<script>
class App {
constructor(){
this.name = "アプリ";
let btn = document.getElementById("btn1");
// function式でイベントリスナーを登録
btn.addEventListener("click", function(){
console.log(this.name);
});
}
}
new App();
</script>
👉 この場合、this は「イベントを発生させた要素（button）」を指すので、this.name は undefined になります。
例2：アロー関数を使った場合
<button id="btn2">クリック</button>
<script>
class App {
constructor(){
this.name = "アプリ";
let btn = document.getElementById("btn2");
// アロー関数でイベントリスナーを登録
btn.addEventListener("click", () => {
console.log(this.name);
});
}
}
new App();
</script>
👉 アロー関数は「定義されたときの this」を引き継ぐので、this は App インスタンスを指します。
結果 → アプリ と表示されます。
例3：function式でも this を固定したい場合
アロー関数を使わずに function式で書きたい場合は、bind を使って this を固定します。
btn.addEventListener("click", function(){
console.log(this.name);
}.bind(this));
👉 bind(this) によって、イベントリスナー内の this が App インスタンスに固定されます。
✅ まとめ
- function式：イベントリスナー内の this は「イベント要素」になる
- アロー関数：外側の this（クラスのインスタンス）を引き継ぐ
- function式でも this を固定したいときは
.bind(this)を使う
💡 実務では：
- 「クラスフィールド＋アロー関数」の書き方が一番シンプルで安全に使われています。