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函数本身作为`
以上就是如何用WebAssembly Reference Types与JavaScript对象交互？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/62529.html
微信扫一扫 
支付宝扫一扫 
