ES6のアロー関数を使って関数を定義しているときjQueryのイベント内でthisを参照するとundefinedになる現象を回避するtipsです。

ES6のアロー関数でjQueryのイベント内のthisがundefinedになるのに対処する

ES6の記法ではfunctionを省略したアロー関数を使うことができます。記述が簡潔になって見通しが良くなるので、これは多用しますよね。

javascript

var test = () => { // var test = function() { ...
  console.log('ok');
}
test(); // ok

アロー関数でjQueryのイベント内のthisがundefinedになった

しかし、jQueryを利用しているとき、イベント内(.onとか.eachとか)のthisがundefinedになってしまい、思ったような挙動を得ることができません。

javascript

var click = () => {
  $('#js-click').on('click', () => {
    $(this).addClass('is-active');
    console.log(this);
  });
}
click();  // undefined

これをざざっとまとめてしまうと、通常.on関数内のthisはその要素を指しますが、アロー関数内のthisはwindowオブジェクトを指します。そしてES6からES5へのコンパイルでbabelを通すことでuse strictモードが適用され、this === windowに対してundefinedと評価しています。

• .on内のアロー関数のthisはwindowを指す
• babelのコンパイルでuse strictが適用
• this === windowがundefinedと評価される

このような流れでjQueryのイベント内のthisがundefinedになっています。

アロー関数でjQueryのイベント内のthisを本来のthisとして取り出す

これに対処する方法は簡単で、第一引数のプロパティから取り出します。e.currentTargetに本来利用したかったthisがいます。

javascript

var click = () => {
  $('#js-click').on('click', (e) => {
    e.preventDefault();
    $(e.currentTarget).addClass('is-active');
  });
}
click();

そもそもアロー関数使わなかったらいいのでは？とかいう案も展開されたりしたのですが、それだと元も子もないような気がしたので、ぼくはこの方法を採用しています。

おわります。