読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【JS】jQueryの.onでES6のアローファンクションに書き換えたら動かなくなったので

JavaScript

jQueryを使ったコーディングで関数定義を ES6(Babel使用)のアローファンクションで書き換えたら動かなくなったので。

単純に関数内でのthisの意味が変わるから挙動も変わる。

アロー関数 - JavaScript | MDN

$('#foo').on('click', function() {
   $(this).hide();
});

$('#foo').on('click', () => {
   $(this).hide();
});

に書き換えると動かない。

↓実際にthisを表示してみた場合undefinedになったけどそんなもんなのか。 windowとかじゃないのか。

See the Pen Check 'this' behave at arrow function by Fumihiro Nakahara (@711fumi) on CodePen.

一応の解決方法

何故かAirbnbのJSスタイルガイドで発見。

jQuery: $(this) vs $(event.currentTarget)

$('#foo').on('click', ev => {
  $(ev.currentTarget).hide()
});

イベントの対象となっているターゲットを呼ぶことで動くみたい。

Airbnbの人はthisを使う必要があったらfunction()で書いても良しって言ってるね。