如何将JavaScript函数转换为WebAssembly.Table可用的funcref？

直接将原生JavaScript函数存入funcref（原anyfunc）类型的WebAssembly Table是不可行的，原因及解决方案如下：

核心原因 #

funcref是WebAssembly规范定义的内部函数引用类型，仅用于指向WebAssembly模块内部定义的函数，和宿主环境（如JavaScript）的函数属于完全不同的执行上下文，二者无法直接兼容。你遇到的TypeError正是因为传入了不符合funcref类型要求的JS函数。

解决方案 #

根据你的需求场景，分两种情况处理：

1. 存储JavaScript函数 #

如果需要在Table中存放JS函数，应将Table的元素类型设置为externref（用于引用宿主环境对象的类型，包括JS函数）：

const table = new WebAssembly.Table({ initial: 1, element: "externref" });
const func = function() { return 42 };
table.set(0, func); // 执行成功
console.log(table.get(0)()); // 输出 42

2. 存储WebAssembly内部函数 #

如果必须使用funcref类型的Table（比如要管理Wasm模块内的函数），只能存入从WebAssembly模块导出的函数，示例如下：

// 编译一个简单的Wasm模块，导出一个返回42的函数
const wasmBytes = new Uint8Array([
  0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
  0x01, 0x07, 0x01, 0x60, 0x00, 0x01, 0x7f, 0x03,
  0x02, 0x01, 0x00, 0x07, 0x07, 0x01, 0x03, 0x66,
  0x6f, 0x6f, 0x00, 0x00, 0x0a, 0x05, 0x01, 0x03,
  0x00, 0x41, 0x2a, 0x0b
]);

WebAssembly.instantiate(wasmBytes).then(({ instance }) => {
  const table = new WebAssembly.Table({ initial: 1, element: "funcref" });
  table.set(0, instance.exports.foo); // 存入Wasm导出的函数，执行成功
  console.log(table.get(0)()); // 输出 42
});

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