JavaScriptのアロー関数ハンドラにおけるthisのエラー

最近では、通常の関数の代わりにどこでもアロー関数を使うことが流行しています。しかし、これらの関数には落とし穴があります - それらはthisを保持しないのです。これが原因でどのような問題に遭遇するかを見てみましょう。

ボタンがあるとします:

<button>text</button>

このボタンへの参照を変数に取得します:

let button = document.querySelector('button');

アロー関数を使ってボタンにイベントハンドラを設定します:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

ここで驚きが待っています: アロー関数内のthisは、イベントが発生した要素を参照しません。

これに対してどのような対策ができるか見てみましょう。

解決策その1

thisの使用をやめ、イベントがバインドされている変数を利用することができます:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

event.targetを通じて、イベントがバインドされた要素を取得できます:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

アロー関数をやめ、通常の関数を利用することができます:

button.addEventListener('click', function() {
	console.log(this.textContent);
});