WebAssembly引用类型与JS对象交互技巧

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《WebAssembly引用类型与JS对象交互方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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胶水代码来理解：

(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引用类型与JS对象交互技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！