Javascript对象中关于setTimeout和setInterval的this介绍

在JavaScript对象中，setTimeout和setInterval两个API与this的密切关联引发了许多开发者在使用时的困扰。本文将详细介绍setTimeout和setInterval中this的四种情况及其解决方法，以帮助开发者更好地理解和使用。

setTimeout使用中的this

在定时器setTimeout的使用过程中，this指向的是全局变量window对象。

示例1：this指向window

const obj = {
  name: 'example',
  sayHello() {
    setTimeout(function () {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
}
obj.sayHello();

以上代码中，setTimeout中的this指向window，因此输出的结果为Hello, undefined!。

解决方法

为了解决this指向window的问题，我们可以使用箭头函数或者bind绑定this。

箭头函数

箭头函数使用定义函数的父级作用域(this)来替换掉this，因此不会改变this的指向。我们可以将定时器里的函数改写成箭头函数：

const obj = {
  name: 'example',
  sayHello() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
}
obj.sayHello();

输出结果为Hello, example!。

bind绑定this

bind是函数原型上的方法，用于将指定的this和参数绑定到某个函数上。我们可以将定时器里的函数使用bind绑定this：

const obj = {
  name: 'example',
  sayHello() {
    setTimeout(function () {
      console.log(`Hello, ${this.name}!`);
    }.bind(this), 1000);
  }
}
obj.sayHello();

输出结果同样为Hello, example!。

setInterval使用中的this

在定时器setInterval的使用过程中，this的指向会根据两种情况进行变化。

情况一：this指向window

setInterval函数会在全局作用域中执行，因此setInterval中的this指向的是全局变量window对象。

const obj = {
  num: 0,
  show() {
    setInterval(function () {
      console.log(this.num++);
    }, 1000)
  }
}
obj.show();

以上代码中，setInterval中的this指向的是window，因此输出的结果会一直打印0。

情况二：this指向对象

我们可以将setInterval中的函数使用bind方法绑定对象，在定时器中的this指向bind绑定后的对象。

const obj = {
  num: 0,
  show() {
    setInterval(function () {
      console.log(this.num++);
    }.bind(this), 1000)
  }
}
obj.show();

以上代码中，setInterval中的this已经指向了obj对象，因此输出的结果会每隔1秒递增1。

至此，我们已经详细讲解了JavaScript对象中关于setTimeout和setInterval的this介绍，通过掌握这些知识点，我们能够更好地理解和使用定时器函数。