JSFiddle - React, Tailwind, and code Playground
JavaScript
// NG例
const timer1 = {
count: 0,
start: function() {
setTimeout(function() {
console.log('timer1 NG例');
// thisはwindowを指す
console.log('this', this);
this.count++;
// this.countはundefinedになる
console.log('this.count', this.count);
}, 1000);
}
};
timer1.start();
/***********************************************/
// OK例
const timer2 = {
count: 0,
start: function() {
setTimeout(function() {
console.log('timer2 OK例');
// thisはbindされているので親オブジェクトを指す
console.log('this', this);
this.count++;
console.log('this.count', this.count);
}.bind(this), 1000);
}
};
timer2.start();
/***********************************************/
// アロー関数
const timer3 = {
count: 0,
start: function() {
setTimeout(() => {
console.log('timer3 アロー関数');
// アロー関数ではthisが固定され、親オブジェクトを指す
console.log('this', this);
this.count++;
console.log('this.count', this.count);
}, 1000);
}
};
timer3.start();