什么场景下值得使用 const that = this ？

在 Vue2 项目中，我们经常会遇到这样一个问题：什么场景下值得用const that = this？这个问题涉及到 JavaScript 中的 this 指针和 Vue 中的模板语法。本文将从以下三个方面来论述这个问题：

• this 指针的含义和变化
• Vue 模板语法中如何使用 this
• const that = this的作用和优劣

首先，我们要明白 this 指针的含义和变化。在 JavaScript 中，this 用以指代当前对象，但是 this 却不是固定不变的。它的指向取决于函数的调用方式和上下文环境。例如：

• 在一个普通函数中，this 指向全局对象（window 或 global）。
• 在一个对象的方法中，this 指向该对象。
• 在一个箭头函数中，this 指向定义时所在的对象。
• 在一个事件处理函数中，this 指向触发事件的元素。
• 在一个构造函数中，this 指向新创建的实例等等。

因此，在不同的场景下，我们需要注意 this 的变化，否则可能会导致意想不到的结果。

其次，我们要了解 Vue 模板语法中如何使用 this 。在 Vue 中，我们可以使用模板语法来绑定数据和事件，例如{{ message }}或@click="handleClick"。这些模板语法会被编译成 JavaScript 代码，并在 Vue 实例的作用域下执行。因此，在模板语法中，this 指向 Vue 实例本身，可以访问到实例的 data、props、methods、computed 等属性和方法。但是，在模板语法中不能直接使用外部定义的常量或变量，例如const CREATE_ACTION = 1。如果我们想要使用这些常量或变量，我们需要将它们暴露在 data、methods 或 computed 中。

最后，我们要探讨const that = this的作用和优劣。这个语句的目的是为了保存当前的 this 指针，以便在其他函数或回调函数中使用。例如，在axios.get().then()中，then 的回调函数中的 this 指向 axios 的回调函数本身，而不是 Vue 实例。如果我们想要在回调函数中访问 Vue 实例的属性或方法，我们就需要在 then 之前将 this 赋值给一个变量 that ，然后在回调函数中使用 that 。这样做可以避免 this 指针的混乱和错误。但是，这个方法也有一些缺点：

• 增加了代码量和复杂度；
• 可能造成内存泄漏；
• 不利于 TypeScript 的类型检查。

综上所述，什么场景下值得用const that = this？我的观点是：当我们需要在其他函数或回调函数中访问 Vue 实例的属性或方法时，可以使用 const that = this 来保存当前的 this 指针

但是，这个方法也有一些缺点，所以我们应该尽量避免使用它，并寻找其他更好的解决方案。例如：

• 使用箭头函数来绑定 this ；
• 使用 mixins 或 plugins 来共享常量或变量；
• 使用 computed 属性来处理复杂的逻辑等等。