ECMAScript 2020 已经发布,这是 JavaScript 语言的最新版本。本篇文章将重点介绍其中的一个重要更新,即全局 this 值的变化。
全局 this 的问题
在 JavaScript 中,全局对象是 window(在浏览器环境中)或 global(在 Node.js 环境中)。当使用 var 或 function 关键字进行声明时,变量会成为全局变量。然而,如果在函数中使用 this,它是应用于调用该函数的对象而不是全局对象。因此,在全局上下文中使用 this 可能会产生混淆。下面是一个例子:
var myVar = 1; function logMyVar() { console.log(this.myVar); } logMyVar(); // 输出 undefined,因为 this 指向 global/window
这里 this 指向全局对象,而全局对象并没有 myVar 属性。如此使用 this 不仅会使代码难以理解,还会产生意想不到的结果。
update
因此,ECMAScript 2020 引入了一个新的方式来获取全局 this,即 globalThis。它提供了跨平台、跨环境的全局 this 值。无论代码是在浏览器、Node.js 还是其他环境中运行,globalThis 始终代表全局对象。前面的例子中,可以使用以下代码解决问题:
var myVar = 1; function logMyVar() { console.log(globalThis.myVar); } logMyVar(); // 输出 1
在模块中增加globalThis
在 ES2020 中,globalThis 自动存在在任何 JavaScript 环境中。然而,这并不意味着它在所有环境下都可靠。在一些旧版本的浏览器或 Node.js 中,可能没有 globalThis 属性。在这种情况下,可以通过将以下代码添加到浏览器或 Node.js 中的模块的顶部,将 globalThis 显式地添加到环境中:
-- -------------------- ---- ------- ----------------- - -- ------- ----------------- --- ------------ - ----------------------------- ------------- - ------ ------- --------- ------ ----------- ------ ------------- ---- --- - --------- ------ --- ----------- - ------ - ------ ------ --- ----------- - ------ - ------ ---- --- ----------- - ---- - ------
这样,即使在旧版环境中,也可以使用 globalThis 获得正确的全局 this 值。
总结
ECMAScript 2020 中全局 this 的变化使开发者不再需要使用复杂的方法和技巧来获取全局 this 值,并且可以提高代码的可读性和可维护性。不过,在一些旧版本环境中,需要手动将 globalThis 添加到环境中。这是一项重大的改进,在开发者的日常工作中具有实际意义,普及推广使用将会提高开发效率和代码质量。
示例代码
-- -------------------- ---- ------- -- ---- - --------------- - -------- -------- --------- - ----------------------- - ---------- -- -- ------- -- ---- -------- ---------- --------- -------- - -- ------- ----------------- --- ------------ - ----------------------------- ------------- - ------ ------- --------- ------ ----------- ------ ------------- ---- --- - --------- ------ --- ----------- - ------ - ------ ------ --- ----------- - ------ - ------ ---- --- ----------- - ---- - ------ ---------------------- --- -------- -- -- ------------- ---------------------- --- -------- -- -- ------ ------- ----
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645f4ad5968c7c53b01580ab