Web Worker 是 HTML5 中支持多线程的 API，在前端领域常常被用于处理耗时的任务。但是，Web Worker 开发中存在不少问题，其中一个最常见的问题就是如何正确地引入全局对象。在 ES11 中，新增了全局对象 globalThis，它可以解决 Web Worker 开发遗留问题。
Web Worker 简介
Web Worker 是 HTML5 中实现多线程的重要 API。我们从构造函数 Worker() 开始，它用于创建一个新的 Web Worker 线程。通过调用 postMessage() 和 onmessage() 方法，我们可以在主线程和工作线程之间传递消息。以下是一个简单的示例：
-- -------- ----- ------ - --- -------------------- ------------------------- -------- ---------------- - ------- -- - ------------------------ -- -- --------- -------------- - ------- -- - ----- ------- - ----------- --------------------- --------------------- ----- --
在上述例子中，主线程创建了一个 Web Worker 对象，向其发送了一条 hello world 消息，然后等待工作线程的回复。工作线程接收到消息后，打印出消息并发送了一条回复。主线程收到回复后，打印出了 got it。
Web Worker 的全局对象引入问题
在 Web Worker 中，不能像主线程一样通过 window 对象获取全局对象。通常情况下，我们会使用 self 或 this 来引入全局对象。例如，以下代码可以在 Web Worker 中获取到全局对象：
----- ---------- - ---- -- ----- -- - --- ------ ------------ -------
这种方式的缺点是，代码不够清晰。在不同的运行环境（如 Node.js）中，这种方式所指的全局对象会不同。如果你在 Web Worker 和主线程之间共享代码，使用这种方式可能会导致一些潜在的问题。
ES11 中的 globalThis
为解决前述问题，ES11 新增了一个全局对象 globalThis，用于在不同的环境下引入全局对象。不同于 self 和 this，globalThis 的值始终指向全局对象。即使在 Web Worker 中，也可以通过 globalThis 获取到全局对象。
以下是一个使用 globalThis 的例子：
----- ---------- - ------ ---- --- ----------- - ---- - ------ ------ --- ----------- - ------ - ------ ------ --- ----------- - ------ - --- -- --- ----- ---------- - -----------
使用 globalThis 的好处是，它可以帮助我们避免在不同运行环境中引入全局对象时的混淆和错误。在 JavaScript 中，全局对象的名称可能因环境而异。例如，在浏览器环境中，全局对象是 window，而在 Node.js 中是 global。通过使用 globalThis，我们可以始终使用同一种方法引入全局对象，无论在什么环境下运行代码。
注意事项
需要注意的是，globalThis 是 ES11 中新增的特性，许多浏览器（包括部分最新版浏览器）可能还未全面支持该特性。如果你需要在旧版本浏览器中使用 globalThis，可以在代码中进行兼容性处理。以下是一个兼容性良好的示例：
----------------- -
-- -------------------- -
----------------- - -------
-
--------- ------ --- ----------- - ------ - ------ ------ --- ----------- - ------ - ----总结
在 Web Worker 开发中，正确地引入全局对象是一件很重要的事情。ES11 中新增的 globalThis 可以帮助我们避免引入全局对象时的混淆和错误。虽然 globalThis 在部分浏览器中还未得到支持，但是我们可以通过兼容性处理来确保代码在不同环境下都能正确运行。如果你正在进行 Web Worker 的开发，可以考虑使用 globalThis 来对你的代码进行优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649e2a1048841e9894ab1e0e