JavaScript – イベント発生時にthisが更新されない

投稿日: by keruu

JavaScriptでは発生したイベントに応じてthisの値が変わるはずですが、何故か変わらなかったのでメモです。

次のコードを書いたところ、thisがwindowのままでした。

@jQuery

$('#hoge').click((e) => {
 console.log($(this));
});

=> [Window]

原因

コールバック関数にアロー関数 (Arrow Function)を使っていることが原因でした。アロー関数ではthisの値が更新されないようです。

通常の無名関数にすれば正常に動作します。

$('#click').click(function (e) {
 console.log($(this));
});

=> [p#click]

もしくはイベントの引数を使って、イベントが発生したターゲットを参照しても動作するようです。

$('#click').click((e) => {
 console.log($(e.currentTarget));
});

=> [p#click]

以上

JavaScript