What's?

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

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

DEVELOPMENT

web
js
jQuery

はじめに

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

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

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.