【Javascript】 ES6のアロー関数とfunction関数で、jqueryのthisの取れる値が違う

目次

【Javascript】 ES6のアロー関数とfunction関数で、jqueryのthisの取れる値が違う

はじめに

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)みたいな書き方ができないそうです。

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

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus