在使定时器setTimeout和setInterval时,会遇到this的指向问题,在没有特殊的指向情况下,两个定时器的回调函数中的this的指向都是window,因为js里的定时器方法定义在window下的。
为了解决一问题,通常在函数的外部存一个变量,在回调函数中使用这个变量,在就是使用箭头函数,因为箭头函数本身没有this,他的this继承的是自身所在作用域。
//没有改的this指向的情况下this指向window
var name = 'window';
var obj = {
name: 'obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(this.name); //window
}, 1000)
}
}
//在函数的外部存一个变量,来改变this的指向
var name = 'window';
var obj = {
name: 'obj',
fn: function () {
var that = this;
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(that.name); //obj
}, 1000)
}
}
//使用箭头函数情况下
var name = 'window';
var obj = { name: 'obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval( () => {
console.log(this.name); //obj
}, 1000)
}
}