如何用WebAssembly Reference Types与JavaScript对象交互？

externref

externref

externref

(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
  )
)

// 假设上述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