アロー関数をjQueryのonメソッドとeachメソッドで使う場合のthis

投稿日:2017年12月28日

Tags: JavaScript jQuery

お疲れ様です、ナガです。

最近 babel を導入し始めましたのでES6記法を少しずつ勉強しています。

今回は、jQueryonメソッドとeachメソッドでアロー関数を使った場合のthisがどういう扱いになるのかという備忘録になります。

onメソッドの場合

例)ボタンをクリックしたらクリックした要素にis-openを付け外しする関数

ES5 コードサンプル

$('.js-button').on('click', function() {
  $(this).toggleClass('is-open');
});
1
2
3

ES6 コードサンプル

$('.js-button').on('click', event => {
  // const $this = $(this) <= これは undefined
  const $this = $(event.currentTarget);
  $this.toggleClass('is-open');
});
1
2
3
4
5

class構文を使用した コードサンプル

class Button {
  constructor(selector) {
    this.$selector = $(selector);
    this.init();
  }
  init() {
    this.$selector.on('click', (event) => {
      // const $this = $(this) <= これはインスタンスを指す
      const $this = $(event.currentTarget);
      $this.toggleClass('is-open');
    });
  }
}
const button = new Button('.js-button');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

eachメソッドの場合

例)マッチした要素の背景色を赤色にする関数

ES5 コードサンプル

$('.js-background--red').each(function(){
  $(this).css('background-color','red');
});
1
2
3

ES6 コードサンプル

$('.js-background--red').each((index, element) => {
  // const $this = $(this) <= これは undefined
  const $this = $(element);
  $this.css('background-color','red');
});
1
2
3
4
5

class構文を使用した コードサンプル

class RedBackground {
  constructor(selector) {
    this.$selector = $(selector);
    this.init();
  }
  init() {
    this.$selector.each((index, element) => {
      // const $this = $(this) <= これはインスタンスを指す
      const $this = $(element);
      $this.css('background-color','red');
    });
  }
}
const redBackground = new RedBackground('.js-background--red');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上記のDEMOです。

あとがき

ES5記法だとonメソッド、eachメソッドの引数に渡した関数内ではthisがjQueryオブジェクトを指してくれました。 アロー関数の場合、thisはオブジェクトに関連付けられたメソッドだと、呼び出し元となるオブジェクトやコンストラクタを指しますが、通常の関数呼び出しの場合はグローバルを指すので、onメソッド、eachメソッドの引数に渡した関数内では今までの用に$(this)みたいな書き方が出来なくなりました。 以上です。

参考

  • シェア:
Last Updated: 2019-9-9 21:37:59