JavaScript | 関数リテラル（通常の function 式）とアロー関数の this の違い

JavaScript

2020.08.142025.10.29

では「イベントリスナーにおける this の違い」を見ていきましょう。ここは function式（関数リテラル） と アロー関数 の挙動の差がとても分かりやすい場面です。

例1：function式を使った場合
例2：アロー関数を使った場合
✅ まとめ
例3：アロー関数で event.target を使う

例1：function式を使った場合

<button id="btn1">クリックしてね</button>

<script>
  let btn1 = document.getElementById("btn1");

  btn1.addEventListener("click", function(){
    console.log(this.id); // → "btn1"
  });
</script>

<button id="btn1">クリックしてね</button>

<script>
  let btn1 = document.getElementById("btn1");

  btn1.addEventListener("click", function(){
    console.log(this.id); // → "btn1"
  });
</script>

HTML

function 式では、イベントリスナー内の this は イベントを発生させた要素 を指す
この場合は btn1 ボタン

例2：アロー関数を使った場合

<button id="btn2">こっちもクリック</button>

<script>
  let btn2 = document.getElementById("btn2");

  btn2.addEventListener("click", () => {
    console.log(this.id); // → undefined
  });
</script>

<button id="btn2">こっちもクリック</button>

<script>
  let btn2 = document.getElementById("btn2");

  btn2.addEventListener("click", () => {
    console.log(this.id); // → undefined
  });
</script>

HTML

アロー関数は 自分自身の this を持たない
代わりに「定義されたときのスコープの this」を引き継ぐ
この場合、外側はグローバルスコープなので this は undefined（strict modeの場合）

✅ まとめ

function式
- イベントリスナー内の this は「イベントを起こした要素」
- ボタンやリンクを直接参照したいときに便利
アロー関数
- this は外側のスコープを引き継ぐ
- イベント要素を参照したいときは event.target を使う必要がある

例3：アロー関数で event.target を使う

<button id="btn3">event.targetで参照</button>

<script>
  let btn3 = document.getElementById("btn3");

  btn3.addEventListener("click", (event) => {
    console.log(event.target.id); // → "btn3"
  });
</script>

<button id="btn3">event.targetで参照</button>

<script>
  let btn3 = document.getElementById("btn3");

  btn3.addEventListener("click", (event) => {
    console.log(event.target.id); // → "btn3"
  });
</script>