1. はじめに
あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリックイベントに対してイベントリスナーを登録するとします。
<button id="btn">ボタン</button>
このとき、無名関数 function(){ ... }
を使う場合と、アロー関数 () => { ... }
を使う場合とで、this
の扱いが違うので注意しましょうというお話です。
2. イベントリスナーの登録
無名関数を使う場合
document.querySelector('#btn').addEventListener('click', function() {
// this は button になります
});
こちらの場合、無名関数の中に記述した this
は、実行時にはボタン要素(id=”btn”)となります。JavaScript の実行エンジンが、こちらに気を遣ってくれてわざわざ切り替えてくれるイメージです。
アロー関数を使う場合
document.querySelector('#btn').addEventListener('click', () => {
// this は window になります
});
こちらの場合、アロー関数の中に記述した this
は、実行時には window
になります。より正確に言うと、この記述部分が実行されたときのコンテキスト(オブジェクト)が this
に束縛されます。たいていは
オブジェクトだろうということです。windows
3. まとめ
2つを比べた場合、無名関数を使った方が便利なことが多いのではないでしょうか?
これは「新しい仕様であるアロー関数の方を使っていれば問題は起きにくいはず」という思考が一概に正しいと言えない一例だと思います。
イベントリスナーを登録する際には、「気を付けないといけないことがあったような…」となるくらいには覚えておいた方がよいでしょう。