在 Web 前端开发中，有一项重要的工作就是实现跨平台功能。随着现代浏览器和 Node.js 的普及，这一任务变得越来越复杂。为了处理不同平台的差异性，开发者不得不编写大量的条件代码。而在 ES12 中，引入了 globalThis（全局对象），为跨平台开发提供了一种更简洁的方法。
globalThis 是什么？
globalThis 是一个新的全局变量，它指向当前环境的全局对象，可以在浏览器、Node.js 和 Web Worker 中使用。在浏览器中，globalThis 等价于 window 对象；在 Node.js 中，globalThis 等价于 global 对象；在其他环境中，globalThis 可能指向其他对象。
如何使用 globalThis？
使用 globalThis 的方法非常简单。只需要将你想要在全局环境中访问的变量或函数定义在 globalThis 上即可。以下是一个例子：
globalThis.myVar = "Hello world"; console.log(myVar); // "Hello world"
在上面的例子中，我们将 myVar 变量定义在 globalThis 上。这意味着无论是在浏览器中还是在 Node.js 中，我们都可以使用 myVar 变量。如果在浏览器中运行代码，myVar 将被定义在 window 对象上。如果在 Node.js 中运行代码，myVar 将被定义在 global 对象上。
globalThis 对跨平台开发的影响
在过去，开发者必须编写大量的条件代码才能确保代码能够在不同的环境中正常运行。例如，在处理文件路径时，开发者必须编写以下代码：
let path;
if (typeof window === "object") {
path = window.location.pathname; // web
} else if (typeof process === "object") {
path = process.cwd(); // node.js
} else {
throw new Error("Unsupported platform");
}在 ES12 中，使用 globalThis 可以简化这些代码：
const path = globalThis.location?.pathname || globalThis.process?.cwd();
这里使用了可选链操作符 ?.，它会在属性值为 null 或 undefined 时返回 undefined，避免了出现错误。
总结
globalThis 给跨平台开发带来了很大的方便，避免了冗长的条件代码。然而，在使用 globalThis 时，需要注意一些细节。例如在 Web Worker 中访问全局变量时，需要使用 self 对象而不是 globalThis。
在实际开发中，我们可以根据不同的环境中的全局变量来判断当前运行环境，并使用 globalThis 来简化跨平台代码的编写。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e38017d4982a6eb7c6c23