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

忘是亡心i 2022-05-11 01:38 192阅读 0赞

## 问题描述 ##

前些天在练习写一个小例子的时候用到了定时器，发现在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` (或`全局`)对象。

## 解决方法 ##

若想要让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中。

[MDN bind]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 setTimeout和setInterval时间准确的问题

1. setTimeout和setInterval，这两个js函数都是用来定时执行。setTimeout执行一次，setInterval执行多次。 2. 问题的出现，使用s

梦里梦外;/ 2022年12月11日 03:15/ 0 赞/ 193 阅读

相关 setInterval和setTimeout

setInterval(func, 1000) 在1000毫秒后，每隔1000毫秒执行1次 setInterval(func(), 1000) 在1000毫秒后执行1次

╰+哭是因爲堅強的太久メ/ 2022年09月25日 04:15/ 0 赞/ 209 阅读

相关 setInterval中this问题,以及bind绑定this的指向问题

Javascript对象中关于setTimeout和setInterval的this介绍，需要的朋友可以参考下在Javascript里，setTimeout和setInte

柔情只为你懂/ 2022年06月18日 05:42/ 0 赞/ 151 阅读

相关 javascript setInterval和setTimeout的this问题

The "`this`" problem 如果你通过setTimeout函数（或其他函数，或其他情况），调用的时候this的值可能并不能像你期待的那样。这种情况已经在[Jav

野性酷女/ 2022年06月04日 05:07/ 0 赞/ 186 阅读

相关 setTimeout()和setInterval()的区别

一、定时器通常我们使用setTimeout()和setInterval()来创建定时器。一般情况下setTimeout()用于延迟执行某方法或功能，setInterval(

短命女/ 2022年05月27日 10:06/ 0 赞/ 188 阅读

相关 setInterval和setTimeout

在项目的支付模块中，最后选用的是支付宝二维码支付方式，增添的一个算是比较有技术含量的东西，就是采用轮询的方式，监听订单状态，对二维码进行刷新。代码如下： ![这里写图

叁歲伎倆/ 2022年05月21日 07:48/ 0 赞/ 323 阅读

相关关于setTimeOut和setInterval改变this指向的问题解决方法

在setTimeOut()或setInterval()这样的方法中，如果传入的函数包含this, 那么，默认情况下，函数中的this会指向window对象。这是由于setTim

亦凉/ 2022年05月13日 01:46/ 0 赞/ 155 阅读

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

问题描述前些天在练习写一个小例子的时候用到了定时器，发现在setInterval和setTimeout中传入函数时，函数中的this会指向window对象，如下例：

忘是亡心i/ 2022年05月11日 01:38/ 0 赞/ 193 阅读

相关 JavaScript中的setInterval()和setTimeout()

1.setlnterval() setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到

水深无声/ 2022年04月05日 03:50/ 0 赞/ 209 阅读

相关 setInterval和setTimeout的区别

setTimeout(表达式,延时时间) 在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次用setTimeout实现的自动变化显示随机数的

刺骨的言语ヽ痛彻心扉/ 2022年01月06日 06:35/ 0 赞/ 309 阅读