アロー関数をjQueryのonメソッドとeachメソッドで使う場合のthis
投稿日：2017年12月28日
お疲れ様です、ナガです。
最近 babel を導入し始めましたのでES6記法を少しずつ勉強しています。
今回は、jQueryのonメソッドとeachメソッドでアロー関数を使った場合のthisがどういう扱いになるのかという備忘録になります。
onメソッドの場合
例）ボタンをクリックしたらクリックした要素にis-openを付け外しする関数
ES5 コードサンプル
$('.js-button').on('click', function() {
$(this).toggleClass('is-open');
});
1
2
3
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
上記のDEMOです。
あとがき
ES5記法だとonメソッド、eachメソッドの引数に渡した関数内ではthisがjQueryオブジェクトを指してくれました。
アロー関数の場合、thisはオブジェクトに関連付けられたメソッドだと、呼び出し元となるオブジェクトやコンストラクタを指しますが、通常の関数呼び出しの場合はグローバルを指すので、onメソッド、eachメソッドの引数に渡した関数内では今までの用に$(this)みたいな書き方が出来なくなりました。
以上です。