如何在Web Worker中调用外部定义的JavaScript函数

Web Worker 运行在独立于主线程的隔离上下文里，无法直接访问主线程全局作用域下定义的函数、DOM 等资源，你当前的写法会在 Worker 侧抛出 doSomething is not defined 的错误。下面是三种可落地的实现方案：

方案1：抽取公共函数文件，Worker 侧导入（最推荐） #

适合可复用的公共逻辑，无额外适配成本，支持复杂函数逻辑。
首先把通用函数抽离到独立的工具文件 utils.js：

// utils.js 公共逻辑文件，主线程和Worker都可以引入使用
function doSomething(parameter){
  // 你的业务逻辑
  console.log('接收参数：', parameter)
  return `处理完成：${parameter}`
}

主线程 main.js 调整（如果主线程也需要用这个函数直接引入即可，不需要的话可以不引入）：

// 主线程如果要用到doSomething可以引入，不需要的话可省略
// import './utils.js'
if (window.Worker) {
  const myWorker = new Worker("worker.js");
  myWorker.postMessage("Hello World");
  // 可选：监听Worker返回的处理结果
  myWorker.onmessage = (e) => {
    console.log('Worker返回结果：', e.data)
  }
} else {
  console.log('你的浏览器不支持Web Worker。');
}

Worker 侧 worker.js 用 importScripts 导入公共文件：

// 导入公共工具文件，支持传入多个路径，用逗号分隔
importScripts('./utils.js')

onmessage = function(e) {
  const result = doSomething(e.data)
  // 处理完成后把结果返回给主线程
  self.postMessage(result)
}

方案2：序列化函数传递，Worker侧反序列化执行 #

适合逻辑简单的纯函数场景，不需要额外抽离文件。注意该方案仅支持无外部依赖的纯函数，不能包含闭包、DOM操作、主线程专属资源引用，否则执行会报错。
主线程 main.js 调整：

function doSomething(parameter){
  // 仅可包含纯逻辑，不能依赖主线程专属资源
  return `处理完成：${parameter}`
}
if (window.Worker) {
  const myWorker = new Worker("worker.js");
  // 把函数序列化为字符串和参数一起传递给Worker
  myWorker.postMessage({
    fnStr: doSomething.toString(),
    data: "Hello World"
  });
  myWorker.onmessage = (e) => {
    console.log('Worker返回结果：', e.data)
  }
} else {
  console.log('你的浏览器不支持Web Worker。');
}

Worker 侧 worker.js 调整：

onmessage = function(e) {
  // 反序列化还原函数
  const doSomething = new Function(`return ${e.data.fnStr}`)()
  const result = doSomething(e.data.data)
  self.postMessage(result)
}

方案3：消息通知主线程执行函数，返回结果给Worker #

适合函数依赖主线程专属资源（比如DOM操作、主线程全局变量等）、无法放到Worker中运行的场景。
主线程 main.js 调整：

function doSomething(parameter){
  // 可以包含操作DOM等仅能在主线程执行的逻辑
  return `处理完成：${parameter}`
}
if (window.Worker) {
  const myWorker = new Worker("worker.js");
  myWorker.postMessage("Hello World");
  // 监听Worker的函数调用请求
  myWorker.onmessage = (e) => {
    if(e.data.type === 'call_doSomething') {
      const result = doSomething(e.data.params)
      // 执行完成后把结果返回给Worker
      myWorker.postMessage({
        type: 'doSomething_result',
        data: result
      })
    }
  }
} else {
  console.log('你的浏览器不支持Web Worker。');
}

Worker 侧 worker.js 调整：

onmessage = function(e) {
  // 发消息通知主线程调用doSomething，传递参数
  self.postMessage({
    type: 'call_doSomething',
    params: e.data
  })

  // 监听主线程返回的执行结果
  self.onmessage = (res) => {
    if(res.data.type === 'doSomething_result') {
      console.log('拿到函数执行结果：', res.data.data)
      // 后续业务逻辑
    }
  }
}

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