【JavaScript】無名関数とアロー関数とイベントリスナーのthis

投稿日：2019年7月29日更新日：2022年8月2日

1. はじめに

あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリックイベントに対してイベントリスナーを登録するとします。

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

このとき、無名関数 function(){ ... } を使う場合と、アロー関数 () => { ... } を使う場合とで、this の扱いが違うので注意しましょうというお話です。


document.querySelector('#btn').addEventListener('click', function() {

  // this は button になります

});

こちらの場合、無名関数の中に記述した this は、実行時にはボタン要素(id=”btn”)となります。JavaScript の実行エンジンが、こちらに気を遣ってくれてわざわざ切り替えてくれるイメージです。


document.querySelector('#btn').addEventListener('click', () => {

  // this は window になります

});

こちらの場合、アロー関数の中に記述した this は、実行時には window になります。より正確に言うと、この記述部分が実行されたときのコンテキスト（オブジェクト）が this に束縛されます。たいていは windowsオブジェクトだろうということです。

2つを比べた場合、無名関数を使った方が便利なことが多いのではないでしょうか？

これは「新しい仕様であるアロー関数の方を使っていれば問題は起きにくいはず」という思考が一概に正しいと言えない一例だと思います。

イベントリスナーを登録する際には、「気を付けないといけないことがあったような…」となるくらいには覚えておいた方がよいでしょう。

執筆者：labo