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

悠悠 2023-03-03 04:53 9阅读 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 (或全局)对象。**具体可参考[MDN setTimeout][]

## 解决方案 ##

若想要让setTimeout中的this指向正确的值，可以使用以下三种比较常用的方法来使this指向正确的值：

### **（1） 将当前对象的this存为一个变量，定时器内的函数利用闭包来访问这个变量**，如下： ###

var num = 0;
    function Obj (){ 
        var that = this;    //将this存为一个变量，赋值给that，此时的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） 箭头函数 ###

使用es6的箭头函数，最为常用。

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 ，直到有 this 的定义。**因此利用箭头函数就可以轻松解决这个问题。

[个人博客网站][Link 1]  
  
  
  
参考链接：  
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Function/bind  
https://www.cnblogs.com/zsqos/p/6188835.html

[MDN setTimeout]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout
[MDN bind]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
[Link 1]: https://aqingya.cn

发表评论取消回复

表情：

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

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

相关阅读

相关 setTimeout和setInterval

概念：超时调用概念：setTimeout(func,ms) 等待ms时间之后执行回调函数func，只执行一次，调用setTimeout会返回一个ID，表示超时调用，超

Love The Way You Lie/ 2023年07月13日 15:30/ 0 赞/ 35 阅读

相关 setInterval方法中this指向问题

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

待我称王封你为后i/ 2023年06月17日 11:57/ 0 赞/ 24 阅读

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

问题：setInterval和setTimeout中传入函数时，函数中的this会指向window对象我们先来看一个例子： var num = 0;

悠悠/ 2023年03月03日 04:53/ 0 赞/ 10 阅读

相关 setInterval和setTimeout

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

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

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

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

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

相关 javascript setInterval和setTimeout的this问题

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

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

相关 setInterval和setTimeout

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

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

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

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

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

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

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

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

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

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

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