Web Worker 中的 DedicatedWorkerGlobalScope 对象-优快云博客

本文链接：https://blog.youkuaiyun.com/wscfan/article/details/147225657

Web Worker 中的 DedicatedWorkerGlobalScope 对象

DedicatedWorkerGlobalScope 是 Web Worker 中的全局作用域对象，它提供了专用 Worker 线程内可访问的方法和属性。这篇教程将深入介绍 DedicatedWorkerGlobalScope 对象及其用法。

什么是 DedicatedWorkerGlobalScope？

当你创建一个专用的 Web Worker 时，Worker 线程中的全局对象就是 DedicatedWorkerGlobalScope。它相当于 Worker 内部的 “window” 对象，但与主线程的全局对象有很大不同。

DedicatedWorkerGlobalScope 的属性

self

self 引用 DedicatedWorkerGlobalScope 对象本身，类似于主线程中的 window。

console.log(self === this); // true（在 Worker 内部）

name

如果在创建 Worker 时指定了 name 参数，则可以通过此属性访问。

// 主线程
const worker = new Worker('worker.js', { name: 'myWorker' });

// Worker 内部
console.log(self.name); // 输出: "myWorker"

location

提供当前 Worker 脚本的位置信息，类似于 window.location。

console.log(self.location.href); // 输出 Worker 脚本的 URL

navigator

提供有关浏览器和系统的信息，但比主线程中的 navigator 对象功能受限。

console.log(self.navigator.userAgent); // 输出用户代理字符串

importScripts

允许 Worker 导入其他 JavaScript 文件。

self.importScripts('helper.js', 'utils.js');

DedicatedWorkerGlobalScope 的方法

postMessage()

用于向创建此 Worker 的线程发送消息。

self.postMessage({ result: 'calculation complete', value: 42 });

close()

终止当前 Worker 的执行。

self.close();

事件处理

message 事件

当主线程调用 worker.postMessage() 时触发。

self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Worker 收到消息:', receivedData);
  
  // 处理数据并回复
  self.postMessage({ result: 'processed', originalData: receivedData });
};

messageerror 事件

当收到无法反序列化的消息时触发。

self.onmessageerror = function(event) {
  console.error('无法处理收到的消息', event);
};

error 事件

当 Worker 中发生未捕获的错误时触发。

self.onerror = function(event) {
  console.error('Worker 错误:', event.message);
  // 阻止错误冒泡到主线程
  event.preventDefault();
};

实际应用示例

下面是一个完整的示例，展示如何使用 DedicatedWorkerGlobalScope：

主线程代码 (main.js)

const worker = new Worker('worker.js', { name: 'computeWorker' });

worker.onmessage = function(event) {
  console.log('主线程收到结果:', event.data);
};

worker.onerror = function(error) {
  console.error('Worker 错误:', error.message);
};

// 发送数据给 Worker
worker.postMessage({
  action: 'compute',
  numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
});

Worker 代码 (worker.js)

// 这里的 self 就是 DedicatedWorkerGlobalScope
console.log('Worker 名称:', self.name);

// 导入辅助脚本
// self.importScripts('helpers.js');

// 监听来自主线程的消息
self.onmessage = function(event) {
  const data = event.data;
  
  if (data.action === 'compute') {
    // 执行一些耗时计算
    const result = data.numbers.reduce((sum, num) => sum + num, 0);
    
    // 将结果发送回主线程
    self.postMessage({
      status: 'complete',
      sum: result,
      workerName: self.name
    });
  }
};

// 处理错误
self.onerror = function(error) {
  console.error('Worker 内部错误:', error.message);
};