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

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

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

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

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

  1. 定时器内部的函数来访问到这个变量，此时的this，就指向了当前对象
  3. function doClick(){
  4.     var that = this;
  5.     setInterval(function() {
  6.       console.log(that.msg);
  7.      }, 1000);
  8. }

2. 利用bind()方法

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

3. ES6的箭头函数

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

  1. function doClick(){
  2.      setInterval(() => {
  3.        console.log(this.msg);
  4.      }, 100);
  5.  },

如何准确判断 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 条评论，259人围观）

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

相关阅读

    相关 setInterval和setTimeout

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

    叁歲伎倆叁歲伎倆/ 0 赞/ 421 阅读