jQueryのコールバックにアロー関数を使うのは待ったほうがいいのかも?function

$('#tag').on('click', (e) => {
  if ( this !== e.currentTarget ) {
    console.log( 'different' );
  }
});

上は実行されます、そして下も実行されます。

どちらもメッセージが出るんです。

$('#tag').on('click', function (e) {
  if ( this === e.currentTarget ) {
    console.log( 'same' );
  }
});

もう少し正確にいうと上の例ではthisがwindowになっています。

つまりthisにカレントターゲットすなわちセレクタで取得されたHTMLElementが設定されてないみたいなんです。

なんでこんな違いが出るのかわからないんですがモダンなアロー関数で書いちゃうとthisで済むところがcurrentTargetと書かされることになります。

vanilla的に言うとcurrentTargetを覚えたほうが、つまりjQuery以外の場面への対応力という観点だとそっちのがいいかもしれませんけど。

あと気になるのはjQueryプラグインを作る場合やっぱりアロー関数だと登録されません。

ここもfunctionで書かないと作ったプラグインが認識されないんです。

なのでjQuery世界ではfunctionで書くほうがいい場合もあるって覚えておいたほうがいいのかもしれません。