能否从主线程向Web Worker共享函数？涉及DedicatedWorkerGlobalScope等API

你提到的直接把主线程的函数传递给Worker是做不到的，因为Worker（不管是DedicatedWorker还是SharedWorker）和主线程处于完全隔离的全局上下文，两者之间只能传递结构化克隆算法支持的数据类型，而函数并不在这个支持列表里。

不过你想要的“Worker触发主线程函数执行并在浏览器输出日志”的需求，可以通过消息通信间接实现：Worker发送消息通知主线程，主线程收到消息后调用对应的本地函数完成操作。

DedicatedWorker 实现示例 #

主线程代码 #

const worker = new Worker('dedicated-worker.js');

// 定义你要执行的函数
const f = (msg) => {
  console.log(`hello from main thread! worker thread says: ${msg}`);
};

// 监听Worker发来的消息，触发函数执行
worker.onmessage = (e) => {
  if (e.data.type === 'invokeMainFunction') {
    f(e.data.msg);
  }
};

DedicatedWorker 代码（dedicated-worker.js） #

// 处于 DedicatedWorkerGlobalScope 环境
// 当需要调用主线程函数时，发送消息
postMessage({ type: 'invokeMainFunction', msg: 'Hi from DedicatedWorker!' });

SharedWorker 实现示例 #

主线程代码 #

const sharedWorker = new SharedWorker('shared-worker.js');

const f = (msg) => {
  console.log(`hello from main thread! worker thread says: ${msg}`);
};

// 监听SharedWorker的消息
sharedWorker.port.onmessage = (e) => {
  if (e.data.type === 'invokeMainFunction') {
    f(e.data.msg);
  }
};

// 初始化端口通信
sharedWorker.port.start();

SharedWorker 代码（shared-worker.js） #

// 处于 SharedWorkerGlobalScope 环境
const connectedPorts = [];

// 监听页面连接
onconnect = (e) => {
  const port = e.ports[0];
  connectedPorts.push(port);
  
  // 发送消息给当前连接的主线程，触发函数执行
  port.postMessage({ type: 'invokeMainFunction', msg: 'Hi from SharedWorker!' });
  
  port.start();
};

核心逻辑就是：Worker无法直接调用主线程的函数，但可以通过postMessage发送指令，主线程监听消息后自行执行对应的函数，这样就能实现你要的日志输出效果。

内容的提问来源于stack exchange，提问作者patrick