WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

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

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

SPONSOR

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

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

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

onメソッドの場合

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

ES5 コードサンプル

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

ES6 コードサンプル

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

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');

eachメソッドの場合

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

ES5 コードサンプル

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

ES6 コードサンプル

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

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');

上記のDEMOです。

あとがき

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

参考

SPONSOR

この記事をシェアする

コメント

関連記事