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

亦凉 2022-05-13 01:46 207阅读 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 条评论，207人围观）

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

相关阅读

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

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

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

相关 JS--改变this的指向--方法/实例

原文网址：[JS--改变this的指向--方法/实例\_IT利刃出鞘的博客-CSDN博客][JS--_this_--_IT_-CSDN] 简介说明本文介绍Java

比眉伴天荒/ 2023年10月02日 17:36/ 0 赞/ 10 阅读

相关 JS的this指向及改变this指向的方法

写在前面 call、apply与bind都可以用来修改this的指向，但是他们之前有什么区别呢？下面我们来举例子说明一下。 this指向请说出下面这个函数的输出

亦凉/ 2023年07月22日 11:28/ 0 赞/ 14 阅读

相关 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 阅读

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

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

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

相关 javascript setInterval和setTimeout的this问题

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

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

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

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

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

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

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

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

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

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

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