ES11 中的 globalThis 对象在 Web Worker 中的使用

在 JavaScript 的历史中，全局对象一直都是一个非常重要的概念。ES11 中引入了 globalThis 对象，它是在浏览器和 Node.js 等环境中提供了一个跨平台的、统一的全局对象。

在 Web Worker 中，globalThis 对象的作用尤为重要。Web Worker 是 HTML5 所带来的重要新特性，可以在后台线程中执行 JavaScript，用于处理大量的计算、IO 或网络请求等任务。在 Web Worker 中，我们不能直接访问 window 对象，也不能使用 this 关键字获取全局对象。globalThis 对象的出现，很好地解决了这个问题。

globalThis 对象在 Web Worker 中的使用方式

globalThis 对象在 Web Worker 中的使用方式与在普通 JavaScript 环境中略有不同。常用的获取全局对象的方法为：

// 方法一：WorkerGlobalScope.self
const globalObject = self;

// 方法二：WorkerGlobalScope.postMessage
let globalObject;
onmessage = (event) => {
  globalObject = event.data;
};

// 方法三：WorkerGlobalScope.importScripts
importScripts('path/to/external/script.js');
const globalObject = self;

上面的方法，虽然可以获得全局对象，但都有一些限制。例如，无法实现在 Web Worker 中使用 eval 函数，无法访问 Web Worker 所在窗口的 DOM 元素等。而 globalThis 对象则不受这些限制，直接在 Web Worker 中使用即可。

const globalObject = globalThis;

globalThis 对象的指导意义

globalThis 对象在 Web Worker 中的使用，是我们在开发 Web Worker 时必须掌握的知识点。除此之外，globalThis 对象在普通 JavaScript 环境中也非常有用。

例如，我们可以使用 globalThis 对象代替 window、self、global 等不同环境中的全局对象，以实现代码的跨平台支持。

const globalObject = typeof window !== 'undefined' ? window :
                    typeof global !== 'undefined' ? global :
                    typeof self !== 'undefined' ? self : 
                    globalThis;

// 在浏览器、Node.js 等环境中都可以正常工作

globalThis 对象也提供了一些 Web API 的标准化方式，例如：

const setTimeoutRef = globalThis.setTimeout;
const webSocketRef = globalThis.WebSocket;

这样我们就可以在不依赖浏览器和 Node.js 的实现方式下，使用相应的 Web API。

示例代码

下面是一个简单的 Web Worker 示例，用于计算斐波那契数列。其中，使用了 globalThis 对象来获取全局对象。

// main.js
const worker = new Worker('worker.js');
worker.postMessage(40);
worker.onmessage = (event) => console.log(event.data);

// worker.js
function fib(n) {
  if (n <= 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

onmessage = (event) => {
  const result = fib(event.data);
  globalThis.postMessage(result);
};

通过以上程序，我们可以在 Web Worker 中计算出第 40 个斐波那契数，而不会阻塞 UI 线程，保证页面的流畅性和响应速度。

总结

globalThis 对象是 JavaScript 语言的一个进一步发展，它提供了一种跨平台的、统一的全局对象方案，可以在 Web Worker 中解决许多问题。在普通 JavaScript 环境中，globalThis 对象也非常有用，可以代替不同环境中的全局对象。我们应该掌握 globalThis 对象的相关知识，在开发 JavaScript 应用程序中更加灵活、开发 Web Worker 时得心应手。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3293cadd4f0e0ffb43cbc