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

亦凉 2022-05-13 01:46 194阅读 0赞

在setTimeOut()或setInterval()这样的方法中，如果传入的函数包含this, 那么，默认情况下，函数中的this会指向window对象。这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

百度了网上的解决方法，如下

### **1. 将当前对象的this存为一个变量** ###

定时器内部的函数来访问到这个变量，此时的this，就指向了当前对象

function doClick(){
        var that = this;
        setInterval(function() {
          console.log(that.msg);
         }, 1000);
    }

### **2. 利用bind()方法** ###

function doClick(){
        setInterval(function() {
          console.log(this.msg);
         }.bind(this), 1000);  //利用bind()将this绑定到这个函数上
    }

### 3. ES6的箭头函数 ###

ES6中的箭头函数, this总是指向词法作用域，也就是外层调用者obj，因此利用箭头函数就可以轻松解决这个问题

function doClick(){
         setInterval(() => {
           console.log(this.msg);
         }, 100);
     },

**如何准确判断 this 指向的是什么？**（转自前端小姐姐）

1 . 函数是否在 new 中调用 (new 绑定)，如果是，那么 this 绑定的是新创建的对象。

2 . 函数是否通过 call,apply 调用，或者使用了 bind(即硬绑定)，如果是，那么 this 绑定的就是指定的对象。

3 . 函数是否在某个上下文对象中调用 (隐式绑定)，如果是的话，this 绑定的是那个上下文对象。一般是 obj.foo()。

4 . 如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到 undefined，否则绑定到全局对象。

5 . 如果把 Null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

6 . 如果是箭头函数，箭头函数的 this 继承的是外层代码块的 this。

发表评论取消回复

表情：

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

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

相关阅读

相关前端js中this指向及改变this指向的方法

一、 this this是JS中的关键字，它始终指向了一个对象， this是一个指针; 参考博文： [this指向及改变this指向的方法][this_this...

本是古典何须时尚/ 2024年04月17日 06:05/ 0 赞/ 80 阅读

相关 setTimeout和setInterval

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

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

相关 setInterval方法中this指向问题

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

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

相关 Js-this指向问题、call()、apply()、bind()改变this指向

0-零 - this几种指向 1. 在全局中this：指向window。 2. 对象方法中this：this指向该对象本身。 3. 回调函数中this：指向wind

爱被打了一巴掌/ 2023年03月01日 06:29/ 0 赞/ 181 阅读

相关 setInterval和setTimeout

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

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

相关 javascript setInterval和setTimeout的this问题

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

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

相关 setInterval和setTimeout

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

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

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

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

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

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

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

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

相关改变this指向的三种方法

[https://www.cnblogs.com/theblogs/p/9943179.html][https_www.cnblogs.com_theblogs_p_99431

分手后的思念是犯贱/ 2022年01月26日 02:01/ 0 赞/ 249 阅读