はじめに

Javascript、jQueryで、Onメソッドを使用する際、ES6のアロー関数で実装した場合と、

function関数で実装した場合で、

関数内で取得できる$(this)の値が異なることに気が付きましたので、詳細をメモしておきます

function関数の場合

ボタンを押してイベント処理をすることがよくあると思いますが、注意が必要です。

$('.button').on('click', function() {
  $(this).props('disabled', true)
})

アロー関数の場合

$('.js-button').on('click', event => {
  // $(this) →　undefined
  const _$this = $(event.currentTarget)
  _$this.props('disabled', true)
})

まとめ

function関数内ではthisは、普通にjQueryオブジェクトを指しますが、

アロー関数の場合、グローバルを指すので、引数に渡した関数内では今までの用に$(this)みたいな書き方ができないそうです。

ハマりましたが、原因がわかりスッキリしました。