用 globalThis 来访问全局变量

编程小号 • 2023-10-29 10:11 • 未分类

JavaScript 可以在不同的环境下执行，常见的有浏览器，Web Worker, Node, Deno 等等。在不同的环境下，访问全局变量的方法不一样。比如，在浏览器上，就有 window, self, frames 等方式。在 Web Worker 里是 self。在 Node 里是 global。

例子：

/* 浏览器环境 */
window === self       // true
window === frames     // true

// 最顶层的窗口
window === parent     // true
window === window.top // true

window.msg = 'hello,world' // ok
console.log(msg).          // hello,world

同样的代码，在 Web Worker 环境，或 Node 环境下运行就会报错。

/* Node */
window.msg = 'hello,world' // Uncaught ReferenceError: window is not defined
console.log(msg)           // Uncaught ReferenceError: msg is not defined

global.msg = 'hello,world' // ok
console.log(msg)           // hello,world

globalThis 提供了一种统一的访问全局变量的方案，比如在浏览器环境，它会指向 window，在 Node 环境，它会指向 global。

/* 在绝大多数 JavaScript 运行环境下都能运行 */
globalThis.msg = 'hello,world'
console.log(msg);

例如在一个 SSR 项目里，如果因为要访问全局变量而使用 window，很可能会导致在服务端渲染的时候报错。这时候，将 window 改成 globalThis 或许就能解决。

兼容性

除了 IE 以外，主流的 JavaScript 运行环境都已经支持 globalThis 。如果想要兼容 IE，可以使用开源的 polyfill 包 github.com/es-shims/gl…。

历史方案

在 globalThis 还没广泛实现之前，常见的方案是使用类似这样的补丁：

const getGlobalThis = () => {
	if (typeof globalThis !== 'undefined') return globalThis;
	if (typeof self !== 'undefined') return self;
	if (typeof window !== 'undefined') return window;
	if (typeof global !== 'undefined') return global;
	if (typeof this !== 'undefined') return this;
	throw new Error('Unable to locate global `this`');
};
var globalThis = getGlobalThis();

来获取当前环境的全局变量。

但是这个补丁并不完美，因为依赖到 this 在非严格模式的函数里，会返回全局对象的特点。在严格模式下就会失效（严格模式下，函数返回的 this 是 undefined)。

另一个更完善，但是也更奇怪的方案：

(function() {
	if (typeof globalThis === 'object') return;
	Object.prototype.__defineGetter__('__magic__', function() {
		return this;
	});
	__magic__.globalThis = __magic__; // lolwat
	delete Object.prototype.__magic__;
}());

// Your code can use `globalThis` now.
console.log(globalThis);