externref允许webassembly直接持有和传递javascript对象引用，解决了类型转换、性能损耗和复杂映射的痛点，实现了wasm与js间高效、自然的交互。
WebAssembly Reference Types，特别是其中的
externref，彻底改变了WebAssembly模块与JavaScript对象交互的方式。它允许Wasm直接持有、传递和存储任何JavaScript值，包括复杂的对象和函数，而无需进行繁琐的数据转换或通过数字索引间接引用。在我看来，这简直就是打通了Wasm与JS之间那道最令人头疼的类型壁垒，让两者间的协作变得前所未有的流畅和自然。
解决方案
以前，想把一个JavaScript对象传给Wasm，那可真是个“体力活”。我们通常得把它序列化成字符串，或者在JS这边维护一个数组，把对象放进去，然后把数组的索引传给Wasm。Wasm拿到索引后，再通过一个JS导入函数去取这个对象。这中间的开销和心智负担，说实话，挺让人头疼的。
但有了
externref，这一切都变了。
externref在Wasm的世界里，就是一个可以指向任何JavaScript值的“黑箱”引用。Wasm不知道它里面具体是什么，但可以安全地存储它、传递它，甚至把它作为函数参数或返回值。说白了，它就是Wasm对JS对象的一种“引用持有”能力。
具体的交互流程，我们可以通过一个简单的WebAssembly Text Format (WAT) 模块和对应的JavaScript胶水代码来理解：
立即学习“Java免费学习笔记（深入）”；
(module
(type $t0 (func (param externref))) ;; 定义一个函数类型，接受一个externref参数
(type $t1 (func (param externref) (result externref))) ;; 定义一个函数类型，接受并返回一个externref
;; 导入一个JS函数，用于打印externref引用的JS对象
(import "js" "log_object" (func $log_object (type $t0)))
;; 导出函数：接受一个externref，并将其传给导入的JS函数
(func (export "process_object") (param $obj externref)
local.get $obj
call $log_object
)
;; 导出函数：接受一个externref，并原样返回
(func (export "pass_through_object") (param $obj externref) (result externref)
local.get $obj
)
;; 定义一个可变的全局变量来存储一个externref，初始值为null
(global $stored_ref (mut externref) (ref.null extern))
;; 导出函数：将传入的externref存储到全局变量
(func (export "store_object_globally") (param $obj externref)
local.get $obj
global.set $stored_ref
)
;; 导出函数：获取全局变量中存储的externref
(func (export "get_stored_object") (result externref)
global.get $stored_ref
)
)对应的JavaScript代码：
// 假设上述WAT内容已编译为your_module.wasm文件
async function initWasm() {
const importObject = {
js: {
log_object: (obj) => {
console.log("Wasm received JS object:", obj);
// 在JS侧，我们可以像操作普通JS对象一样操作这个obj
if (obj && typeof obj === 'object' && 'name' in obj) {
console.log("Object name property from JS:", obj.name);
}
}
}
};
const response = await fetch('your_module.wasm'); // 实际项目中，你需要将上述WAT编译成.wasm文件
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer, importObject);
const {
process_object,
pass_through_object,
store_object_globally,
get_stored_object
} = module.instance.exports;
const myJsObject = { id: 123, name: "WebAssembly is cool", data: [1, 2, 3] };
console.log("\n--- 测试 process_object ---");
process_object(myJsObject); // 将JS对象直接传给Wasm，Wasm再传给导入的JS函数
console.log("\n--- 测试 pass_through_object ---");
const returnedObj = pass_through_object(myJsObject); // Wasm接收并返回同一个JS对象
console.log("Wasm返回的JS对象与传入的是同一个吗?", returnedObj === myJsObject); // 预期为 true
console.log("\n--- 测试全局存储 ---");
const anotherJsObject = { message: "Stored globally in Wasm!", value: 42 };
store_object_globally(anotherJsObject); // 将JS对象存储到Wasm的全局变量
console.log("JS对象已存储到Wasm全局变量中。");
const retrievedObj = get_stored_object(); // 从Wasm全局变量中取回JS对象
console.log("从Wasm全局变量中取回的对象:", retrievedObj);
console.log("取回的对象与原对象是同一个吗?", retrievedObj === anotherJsObject); // 预期为 true
// 清除Wasm中的全局引用，使其有机会被JS GC回收
store_object_globally(null);
console.log("Wasm全局引用已清除。");
}
initWasm().catch(console.error);externref
到底解决了哪些痛点？
在我看来，
externref的引入，就像是给WebAssembly和JavaScript之间架起了一座直通桥，彻底解决了过去那些让人头疼的交互问题。
-
类型保真度与心智负担的解放： 以前，JavaScript对象传入Wasm时，往往会“面目全非”，变成一个数字索引或者经过序列化的字符串。Wasm需要通过这个索引或者反序列化来间接操作对象，而JS那边还得维护一个对象池。这不仅增加了额外的开发和维护成本，也让代码逻辑变得复杂，开发者的心智负担很重。
externref
直接传递引用，保持了对象的身份，Wasm拿到它，就是拿到了那个JS对象本身，大大降低了这种“翻译”和“映射”的开销。 -
性能瓶颈的突破： 序列化和反序列化操作，特别是对于大型或复杂的对象，是非常耗费CPU资源的。
externref
避免了这些昂贵的转换过程，直接传递引用，从而在对象传递的场景下带来了显著的性能提升。这对于需要高频次、大数据量交互的应用来说，简直是福音。 -
Web API的直接交互： 想象一下，你的Wasm模块需要直接操作DOM元素、Canvas上下文、WebGL渲染器或者Web Audio节点。在
externref
之前，你需要通过JS封装一层又一层，Wasm每次操作都得跳回JS。现在，Wasm可以直接持有这些Web API对象的externref
，减少了JS作为“中间人”的必要性，让Wasm能更直接、更高效地参与到Web应用的逻辑中。 -
更自然的函数回调机制： Wasm模块经常需要回调JavaScript函数。有了
externref
，我们可以直接将JS函数本身作为`
