位置: 主页 > 兴發娱乐首页登录 >

关于setInterval和setTImeout中的this指向问题

时间:70-01-01 08:00 来源:

问题描述

前些天在演习写一个小例子的时刻用到了准时器,发明在setInterval和setTimeout中传入函数时,函数中的this会指向window工具,如下例:

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(this.num);

}, 1000)

}

}

var obj = new Obj;

obj.getNum();//1  打印的是obj.num,值为1

obj.getNumLater()//0  打印的是window.num,值为0

问题缘故原由

从上述例子中可以看到setTimeout中函数内的this是指向了window工具,这是因为setTimeout()调用的代码运行在与所在函数完全分离的履行情况上。这会导致这些代码中包孕的 this 关键字会指向 window (或全局)工具。具体可参考MDN setTimeout

办理措施

若想要让setTimeout中的this指向精确的值,可以应用以下三种对照常用的措施来使this指向精确的值:

1.将当前工具的this存为一个变量,准时器内的函数使用闭包来造访这个变量,如下:

var num = 0;

function Obj (){

var that = this;//将this存为一个变量,此时的this指向obj

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(that.num);//使用闭包造访that,that是一个指向obj的指针

}, 1000)

}

}

var obj = new Obj;

obj.getNum();//1  打印的是obj.num,值为1

obj.getNumLater()//1  打印的是obj.num,值为1

这种措施是将当前工具的引用放在一个变量里,准时器内部的函数来造访到这个变量,自然就可以获得当前的工具。

2.使用bind()措施

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(this.num);

}.bind(this), 1000)//使用bind()将this绑定到这个函数上

}

}

var obj = new Obj;

obj.getNum();//1  打印的为obj.num,值为1

obj.getNumLater()//1  打印的为obj.num,值为1

bind()措施是在Function.prototype上的一个措施,当被绑定函数履行时,bind措施会创建一个新函数,并将第一个参数作为新函数运行时的this。在这个例子中,在调用setTimeout中的函数时,bind措施创建了一个新的函数,并将this传进新的函数,履行的结果也便是精确的了。关于bind措施可参考 MDN bind

3. 箭头函数

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(() => {

console.log(this.num);

}, 1000)//箭头函数中的this老是指向外层调用者,也便是Obj

}

}

var obj = new Obj;

obj.getNum();//1  打印的是obj.num,值为1

obj.getNumLater()//1  打印的是obj.num,值为1

ES6中的箭头函数完全修复了this的指向,this老是指向词法感化域,也便是外层调用者obj,是以使用箭头函数就可以轻松办理这个问题。

以上三种措施都是对照常用的,当然假如应用call或apply措施来代替bind措施,获得的结果也是精确的,然则call措施会在调用之后急速履行,那样也就没有了延时的效果,准时器也就没有用了,以是保举应用上述措施来将this传进setTimeout和setInterval中。

转自:关于setInterval和setTImeout中的this指向问题

本文由兴发老虎机手机版网页❽原创或转载,如果侵犯了你的权益,请联系我们删除。

热门文章
最新文章

Copyright © 2002-2011 饼干族 版权所有