Onメソッドでアロー関数を使う場合のthisについて

個人的な復習と健忘録として。

アロー関数内のthisは挙動が変わります。

//ES5記法
$('#hoge').on('click', function() {
  $(this).hide();
});

これをアロー関数で書いた場合

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

これだと動かない。
$(this) ← これは undefinedになる

// OK
$('#hoge').on('click', (event) => {
  $(event.currentTarget).hide();
});

• ES5記法だと、on メソッドの引数に渡した関数内での this はjQueryオブジェクトを返す。
• アロー関数の場合、this はオブジェクトに関連付けられたメソッドだと、呼び出し元となる関数オブジェクトやコンストラクタを指し、呼び出し元のオブジェクトがない場合はグローバルオブジェクトを指すので実は宣言時のthisが縛られることになる

つまり、イベント対象になっているターゲットを呼ぶことで動く。
eachメソッドとかでも同様。

引き継いだコードに合わせてES5記法で書いていると、
いざアロー関数を書こうと思ったときに忘れがちになるので気をつけましょうというお話でした。