LoginSignup
12
7

More than 5 years have passed since last update.

【jQuery+Typescript】jQueryにアロー関数を渡してはいけない

Last updated at Posted at 2016-09-08

TypescriptでjQuery使っててハマったので。

アロー関数便利!!!って言いながら次のようなコードを書くと意図した通りに動きません。

damenayatsu.ts
$(function(){
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').mousehover(()=>{
    $(this).css('background-color', 'red');
  });
})

これをJavascript(ES5)へトランスパイルすると次のようなコードが生成されます。

damenayatsu.js
$(function(){
  var _this = this; //あっ
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.nanikano-list').mousehover(function() {
    //あっ
    $(_this).css('background-color', 'red');
  });
})

言語仕様については僕も詳しくないのですが、どうやらアロー関数のthisはES5のように「その関数を呼んだオブジェクト」ではなく「その関数を呼んだオブジェクトの親」を指すようです。
C++などのオブジェクト指向言語におけるクラスメソッドでのthisのような挙動ということですね。
とりあえずですが、これについては以下の様なコードで対応しました。

iiyatsu.ts
$(function(){
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').mousehover(function() { //アロー関数をあきらめる
    $(this).css('background-color', 'red');
  });
})

Typescript感がゼロに・・・。
もっといい方法があればご教授ください。。。

追記

これを書いた当時は全くJavaScriptを知らなかったのもあってかなり荒唐無稽な結論で終わっていましたが、次のように書くとよさそうです。

new.ts
$(() => {
  //マウスを要素に重ねると背景色が変わって欲しい
  $('.btnlist').hover((event: MouseEvent) => {
    $(event.target).css('background-color', 'red');
  });
});

thisなんて必要なかったんや…。

12
7
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7