前端知识-js中为什么要声明that等于this

在JavaScript中，使用 const that = this（或者有时也用 var that = this 或 let that = this）是一种常见的做法，主要用于解决函数内部的 this 上下文问题。这种做法尤其常见于需要在回调函数中访问外部对象的上下文的情况。

背景知识

在JavaScript中，this 关键字的行为取决于函数是如何被调用的。不同的调用方式会导致 this 指向不同的对象。例如，在一个普通函数中，this 默认指向全局对象（在浏览器环境中通常是 window 对象），而在严格模式下则是 undefined。而在一个方法中，this 通常指向调用该方法的对象。

使用场景

当在一个方法内部定义了另一个函数（如事件处理器或定时器回调），而这个内部函数需要访问外部方法中的 this 时，就会遇到问题。因为在这个内部函数中，this 可能不会指向你期望的那个对象。为了确保内部函数能够正确地访问到外部方法中的 this，可以提前将 this 的值保存到一个变量中，比如 that。

示例

考虑以下代码片段：

function MyObject() {
    this.value = 42;

    setTimeout(function() {
        console.log(this.value); // 这里的 'this' 不是指向 MyObject 实例的
    }, 1000);
}

const obj = new MyObject();

在这个例子中，setTimeout 中的回调函数的 this 将指向全局对象，而不是 MyObject 的实例。因此，console.log(this.value) 将输出 undefined 或其他值，具体取决于环境。

通过使用 const that = this，我们可以修复这个问题：

function MyObject() {
    this.value = 42;
    
    const that = this; // 保存 'this'

    setTimeout(function() {
        console.log(that.value); // 正确输出 42
    }, 1000);
}

const obj = new MyObject();

在这个修正后的版本中，that 是在构造函数的作用域中定义的，并且指向了正确的 MyObject 实例。因此，即使在 setTimeout 回调中，我们也可以通过 that 访问到正确的对象实例。

替代方案

随着 ES6 的引入，箭头函数提供了一种更简洁的方式来处理 this 绑定的问题。箭头函数不会创建自己的 this 值，而是从外部作用域继承 this。因此，上面的例子可以用箭头函数重写为：

function MyObject() {
    this.value = 42;

    setTimeout(() => {
        console.log(this.value); // 直接使用 'this'，输出 42
    }, 1000);
}

const obj = new MyObject();

这种方式更加简洁，避免了额外的变量声明。