【JavaScript】 「this」は「function」と「アロー関数」で中身が違う

こんにちは、さち です。

今回は、JavaScript の「関数」の中で使ったときの this について書いていきます。

実は this の中身は、「function」と「アロー関数」どちらを使うかで異なるんです。

この違いはエラーの原因になりかねません。ぜひ覚えておきましょう。

関数の書き方で「this」の中身が変わる

HTML

<button id="btn" >ボタン</button>

JavaScript

var elm = document.getElementById('btn');

// function を使った場合
elm.addEventListener('click', function() {
  console.log(this);// -> <button id=btn>
});

// アロー関数を使った場合
elm.addEventListener('click', ()=> {
  console.log(this);// -> Window
});

elm に addEventListener を使って、「function」と「アロー関数」2種類のイベントを設定しました。

この「イベント」が発火すると、「function」の方の this はイベントを設定した要素 elm になりますが、「アロー関数」の方の this は Window になります。

関数内で this を使いたい場合は、この違いに注意しましょう。