JavaScriptアロー関数でthisが動かない

スポンサーリンク

jqueryでよくやるこういった記述

$('.class').on('click',function(){
console.log(this);
});

これを最近っぽくアロー関数で書くとうまくthisでクリックしたデータが取れない

$('.class').on('click',() => {
console.log(this);
});

これは似ているようで実際は仕様が違うからである。
後者のthisはクリックしたもののデータではなく、全てのこの機能が付与されたものに対してのデータが取得されるらしい。
この場合は以下のようにする。

$('.class').on('click',(e) => {
const el = e.currentTarget;
console.log(el);
});

参考
https://ginpen.com/2017/12/03/arrow-funcitons/

コメント

タイトルとURLをコピーしました