Emscripten中如何在C代码中保持JavaScript对象引用

在Emscripten项目中，开发者经常需要处理C/C++与JavaScript之间的交互。一个常见需求是在C代码中保持对JavaScript对象的引用，以便后续操作。本文将深入探讨这一技术挑战及其解决方案。

问题背景

当使用Emscripten将C/C++代码编译为WebAssembly时，开发者可能会尝试在C代码中存储JavaScript对象引用。例如，获取Canvas的2D上下文后，希望在后续的C代码中继续使用该上下文对象。

初始尝试与问题

开发者最初尝试使用EM_ASM_PTR宏来获取并返回JavaScript对象指针：

void *crc2d = EM_ASM_PTR({
    const ctx = document.getElementById('canvas').getContext('2d');
    return ctx;
});

然而这种方法会失败，因为EM_ASM_PTR无法正确保持JavaScript对象的引用，返回的指针值为0，后续操作会抛出异常。

解决方案一：全局变量法

一种简单有效的方法是将JavaScript对象存储在全局变量中，通过索引来引用：

int crc2d = EM_ASM_INT({
    const ctx = document.getElementById('canvas').getContext('2d');
    window['a'+1234] = ctx;  // 存储在全局对象中
    return 1234;             // 返回索引
});

EM_ASM({
    const a = window['a'+$0];  // 通过索引获取对象
    a.strokeStyle = 'blue';
}, crc2d);

这种方法需要注意：

1. 使用前缀避免与window对象的现有属性冲突
2. 需要自行管理对象的生命周期
3. 简单直接，适合简单场景

解决方案二：使用EM_JS和__externref_t

更现代的解决方案是使用EM_JS宏和__externref_t类型：

EM_JS(__externref_t, makeCtx, (), {
    const ctx = document.getElementById('canvas').getContext('2d');
    return ctx;
});

EM_JS(void, applySettings, (__externref_t ctx), {
    ctx.strokeStyle = 'blue';
    ctx.strokeRect(20,20,10,10);
});

int main(void) {
    __externref_t ctx = makeCtx();
    applySettings(ctx);
}

这种方法的特点：

1. 使用专门的__externref_t类型表示外部引用
2. 类型安全，编译器可以检查类型匹配
3. 代码结构更清晰
4. 需要较新版本的Emscripten支持

高级方案：hiwire库

对于需要将JavaScript引用存储在结构体或数组中的复杂场景，可以使用hiwire库。该库提供了更完善的引用管理机制，包括：

1. 引用计数
2. 自动内存管理
3. 支持存储在复杂数据结构中

最佳实践建议

1. 对于简单场景，全局变量法足够且易于实现
2. 对于需要类型安全的中等复杂度场景，使用EM_JS和__externref_t
3. 对于需要将引用存储在数据结构中的复杂场景，考虑使用hiwire库
4. 注意不同方案的浏览器兼容性要求
5. 始终考虑对象的生命周期管理

总结

Emscripten提供了多种方式来处理C/C++与JavaScript之间的对象引用。开发者应根据具体需求选择合适的方法，从简单的全局变量到更高级的hiwire库，每种方案都有其适用场景。理解这些技术细节有助于开发更健壮的WebAssembly应用。