在 JavaScript 编程中，this 是一种非常重要的关键字。它通常用于指代当前执行上下文中的对象或函数。但是，this 的工作方式可能会让一些开发人员感到困惑。在 ECMAScript 2021 中，this 关键字的行为有了一些改变。在本文中，我们将深入研究 this 关键字的工作方式，帮助您更好地理解它的行为。
this 关键字的基本概念
在 JavaScript 中，this 关键字通常用于指代当前执行上下文中的对象或函数。具体来说，this 的值是在函数被调用时动态计算的，它的值取决于函数的调用方式。this 的值可能是以下之一：
- 全局对象（对于在全局作用域中调用的函数）
- 调用函数的对象（对于对象方法）
- 作为构造函数使用的函数的实例
- 在 apply 或 call 方法中提供的指定对象
这些情况下的 this 的值是不同的，因此在理解 this 的工作方式时，关键是理解它是如何计算的。
ECMAScript 2021 中的 this 关键字
在 ECMAScript 2021 中，this 关键字的行为有了一些改变。具体来说，箭头函数的 this 值是在函数被定义时确定的，而不是在函数被调用时动态计算的。这意味着箭头函数的 this 值与它所在的上下文相同。例如，考虑以下代码：
const obj = {
name: "Alice",
greet: () => {
console.log(`Hello, ${this.name}!`);
},
};
obj.greet();在这个例子中，greet 方法是一个箭头函数。因此，它的 this 值与它所在的上下文（即全局对象）相同。因此，这个代码段的输出将是 "Hello, undefined!"。
这是因为箭头函数没有自己的 this 值，它们只是从外部作用域继承 this 值。因此，如果您需要在箭头函数中访问对象属性，您需要使用外部作用域中的 this 值。例如，您可以修改上面的代码如下：
-- -------------------- ---- -------
----- --- - -
----- --------
------ ---------- -
----- ---- - -----
----- ------- - -- -- -
------------------- ----------------
--
----------
--
--
------------在这个例子中，我们创建了一个名为 self 的变量，它保存了外部作用域中的 this 值。然后，我们定义了一个名为 greetFn 的箭头函数，并在其中使用 self 变量来访问对象属性。因此，这个代码段的输出将是 "Hello, Alice!"。
总结
在 ECMAScript 2021 中，this 关键字的行为有了一些改变。箭头函数的 this 值是在函数被定义时确定的，而不是在函数被调用时动态计算的。这意味着箭头函数的 this 值与它所在的上下文相同。因此，在使用箭头函数时，您需要小心处理 this 值。如果您需要在箭头函数中访问对象属性，您需要使用外部作用域中的 this 值。希望本文能够帮助您更好地理解 this 关键字的工作方式，并在编写 JavaScript 代码时更加自信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66086878d10417a2226fe5e2