如何在C++编译的WASM中处理JS对象引用及DOM元素

一、使用WASM外部引用类型（externref） #

Clang支持WASM的externref类型，对应C++中的内置类型__externref_t，可直接用来传递JS对象（包括DOM元素），这是目前最直接的方案，无需手动维护WebAssembly.Table。

C++ 代码实现 #

// 声明导入的JS函数，用__externref_t类型传递引用
extern "C" __externref_t DOMGetElementById();
extern "C" void DOMChangeText(__externref_t element);

class CMyElement
{
private:
    __externref_t Element;

public:
    CMyElement() : Element(DOMGetElementById()) {}

    void ChangeText()
    {
        DOMChangeText(Element);
    }
};

extern "C" int main()
{
    CMyElement myElement;
    myElement.ChangeText();
    return 0;
}

JS 代码实现 #

const wasmImports = {
    env: {
        DOMGetElementById: () => {
            // 直接返回DOM元素，WASM会自动包装为externref
            return document.getElementById("myElement");
        },
        DOMChangeText: (element) => {
            // 直接使用传递过来的DOM元素引用
            element.textContent = "Hello world.";
        }
    }
};

// 编译并实例化WASM模块（假设wasmCode已获取）
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);
wasmInstance.exports.main();

注意事项 #

• 编译时需指定WASM目标：clang --target=wasm32 -nostdlib -Wl,--no-entry -Wl,--export-all -o dom.wasm dom.cpp
• __externref_t由WASM的GC机制自动管理，只要C++中持有该变量，对应的JS对象就不会被垃圾回收。

二、使用WebAssembly.Table存储引用 #

如果需要手动管理引用生命周期，可通过WebAssembly.Table存储DOM元素，C++中传递表的索引间接操作元素。

JS 代码实现（先创建Table） #

// 创建存储externref类型的Table，初始大小10，可扩容至100
const elementTable = new WebAssembly.Table({
    element: 'externref',
    initial: 10,
    maximum: 100
});

let nextIndex = 0;

const wasmImports = {
    env: {
        DOMGetElementById: () => {
            const element = document.getElementById("myElement");
            // 将元素存入Table，返回索引给C++
            elementTable.set(nextIndex, element);
            return nextIndex++;
        },
        DOMChangeText: (index) => {
            // 通过索引从Table中取出元素操作
            const element = elementTable.get(index);
            element.textContent = "Hello world.";
        }
    }
};

// 实例化WASM模块
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);
wasmInstance.exports.main();

C++ 代码实现（操作索引） #

// 导入的JS函数返回/接收整数类型的索引
extern "C" int DOMGetElementById();
extern "C" void DOMChangeText(int elementIndex);

class CMyElement
{
private:
    int ElementIndex;

public:
    CMyElement() : ElementIndex(DOMGetElementById()) {}

    void ChangeText()
    {
        DOMChangeText(ElementIndex);
    }
};

extern "C" int main()
{
    CMyElement myElement;
    myElement.ChangeText();
    return 0;
}

注意事项 #

• 需手动管理Table的索引和元素生命周期，避免索引失效（比如元素被移除后未清理对应索引）。
• C++无需直接访问WebAssembly.Table，所有表操作通过JS导入的函数完成。

关键问题解答 #

1. Clang中的特殊类型：Clang提供__externref_t用于表示WASM外部引用类型，可直接传递JS对象；还有__funcref_t专门用于函数引用。
2. 访问WebAssembly.Table：C++无法直接调用WASM Table的API，需通过JS导入的函数间接操作；若需在WASM内操作Table，可将Table作为导入对象传入，配合WASM的table.get/table.set指令（但一般不推荐，增加复杂度）。

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