ES12 中新增的 globalThis 对象存在的一些问题及解决方式-JavaScript中文网-JavaScript教程资源分享门户

介绍

随着时间的推移，JavaScript 中的全局环境已经发生了很多变化。在 ES6 中，我们看到了大量的新特性被引入，包括 let 和 const 等块级作用域，以及解构赋值和箭头函数等语法简化方式。而在 ES12 中，我们又迎来了一个新的全局环境：globalThis。

globalThis 的问题

当我们在使用 JavaScript 编程时，经常会遇到需要访问全局对象的情况。在以前，我们常常使用 window 或者 self 来访问全局对象。然而，这种方法有以下几个问题：

在浏览器和 Node.js 环境下，全局对象的名称不一样（分别是 window 和 global）。
在 Web Worker 环境下，全局对象的名称甚至可能是 self 或 postMessage。
在某些情况下，我们需要在 JavaScript 环境之外访问全局对象，例如使用 WebAssembly。

因此，在 ES12 中推出了一个新的全局对象：globalThis。它是一个标准化的方式来访问全局对象，可以兼容所有的 JavaScript 环境。

globalThis 的解决方式

使用 globalThis 替代 window 和 self 来访问全局对象。

// 访问全局对象的方式
const globalObject = typeof globalThis !== 'undefined' ? globalThis : window || self;

globalThis 的使用方法与其他全局对象类似，并且可以通过 this 关键字来访问。

// 访问全局对象
console.log(this === globalThis); // true

// 在全局上下文中定义变量
globalThis.myApp = { name: 'My App' };
console.log(myApp.name); // 'My App'

在一些应用程序中，我们可能需要在 JavaScript 环境之外访问全局对象。例如，可以使用 WebAssembly 在 JavaScript 之外运行本地代码。在这种情况下，我们可以使用全局导入来访问全局对象。下面是如何在 WebAssembly 中访问全局对象的示例代码：

// 在 WebAssembly 中访问全局对象
(await WebAssembly.instantiateStreaming(fetch('my_module.wasm'), {
  env: {
    "global_object": globalThis
  }
})).exports.my_function();

总结

全局对象是 JavaScript 中不可或缺的一部分，但是在不同的 JavaScript 环境中访问全局对象的方式是不同的。在 ES12 中，我们引入了一个全局对象 globalThis，它可以标准化全局对象的访问方式，并且可以兼容所有的 JavaScript 环境。因此，在开发中，我们应该尽可能使用 globalThis 替代 window 和 self 来访问全局对象，以保证代码的可移植性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/654d80e87d4982a6eb6e17c8