剖析this在函数、setInterval和setTimeout中的指向玄机

2024-02-20 15:04:20

前言

在JavaScript中，this是一个非常重要的概念，它决定了函数内部的this指向的对象，因此理解this的指向规则对于编写出健壮可靠的代码至关重要。本文将重点探讨this在三种特殊情况下——立即执行函数、setInterval和setTimeout函数中的指向问题，通过深入浅出的示例代码和讲解，帮助读者轻松掌握this的指向规则，提高JavaScript编码能力。

立即执行函数中的this指向

立即执行函数（IIFE），顾名思义，是指在定义后立即执行的函数，它通常用于封装代码，防止其污染全局作用域。在IIFE中，this关键字默认指向window对象，除非显式地改变其指向。

(function () {
  console.log(this); // 输出: window
})();

如果想要改变IIFE中this的指向，可以使用call()、apply()或bind()方法，或者使用箭头函数（ES6）。例如：

// 使用call()方法改变this指向
(function () {
  console.log(this); // 输出: objectA
}).call(objectA);

// 使用apply()方法改变this指向
(function () {
  console.log(this); // 输出: objectB
}).apply(objectB);

// 使用bind()方法改变this指向
const boundFunction = (function () {
  console.log(this); // 输出: objectC
}).bind(objectC);
boundFunction();

// 使用箭头函数改变this指向
const arrowFunction = () => {
  console.log(this); // 输出: window
};
arrowFunction();

在这些例子中，objectA、objectB和objectC都是普通对象，而arrowFunction()是一个箭头函数。可以看出，call()、apply()和bind()方法可以显式地改变this的指向，而箭头函数则继承了其外层作用域的this指向，在这种情况下，箭头函数中的this指向window对象。

setInterval和setTimeout函数中的this指向

setInterval()和setTimeout()函数都是用来在指定的时间间隔后执行某个函数的，它们都是全局函数，因此this关键字在其中默认指向window对象。但是，如果想要改变this的指向，可以使用call()、apply()或bind()方法，或者使用箭头函数（ES6）。

// 使用call()方法改变this指向
setInterval(function () {
  console.log(this); // 输出: objectA
}, 1000).call(objectA);

// 使用apply()方法改变this指向
setTimeout(function () {
  console.log(this); // 输出: objectB
}, 1000).apply(objectB);

// 使用bind()方法改变this指向
const boundFunction = setInterval(function () {
  console.log(this); // 输出: objectC
}, 1000).bind(objectC);

// 使用箭头函数改变this指向
const arrowFunction = () => {
  console.log(this); // 输出: window
};
setTimeout(arrowFunction, 1000);