--- title: 导出的WebAssembly函数 slug: WebAssembly/Exported_functions tags: - JavaScript - WebAssembly - wasm - 导出 - 导出的wasm函数 - 导出的函数 - 指南 translation_of: WebAssembly/Exported_functions ---
导出WebAssembly函数的过程,其实就是指这些函数在JavaScript中如何用表示。本文更详细的介绍它们。
导出的WebAssembly函数只是用JavaScript来表示WebAssembly函数的封装而已。当你调用它们的时候,就会有一些后台活动把参数转换为wasm能够处理的类型(例如,把JavaScript数字转换为Int32类型),参数被传递到wasm模块中的函数,函数被调用,返回值被转换并传回到JavaScript。
你可以通过两种方式来获得导出的WebAssembly函数:
无论哪种方式,你得到的都是底层函数的相同封装。从JavaScript的角度来看,每一个wasm函数看起来也是一个JavaScript函数——但是,它们被封装在导出的wasm函数对象实例中,并且只有有限的方式来获取它们。
让我们看个例子从而让事情更清晰(你可以在GitHub上找到这个例子table-set.html;或者实时运行然后查看wasm文本表示):
var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 }); fetchAndInstantiate('table.wasm').then(function(instance) { var tbl = instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 otherTable.set(0,tbl.get(0)); otherTable.set(1,tbl.get(1)); console.log(otherTable.get(0)()); console.log(otherTable.get(1)()); });
在这里,我们使用WebAssembly.Table构造函数在JavaScript中创建了一个表格(otherTable),然后使用fetchAndInstantiate()实用函数把table.wasm加载到我们的页面。
然后,我们得到了从模块中导出的函数,通过tbl.get()获取引用的函数并且把每一次的调用结果输出到控制台。接下来,我们使用set()使得otherTable表格包含了与tbl表格相同的函数。
为了证明这一点,我们从otherTable 中获取了这些引用并且也把他们的结果打印到控制台,结果是一样的。
在前面的例子中,每次Table.prototype.get()调用的返回值都是一个导出的WebAssembly函数——这正是我们一直在讨论的。
它们确实是JavaScript函数也是对WebAssembly函数的封装。如果你把上面的例子加载到支持WebAssembly的浏览器中,然后在你的控制台运行下面几行代码:
var testFunc = otherTable.get(0); typeof testFunc;
你得到的返回结果是function 。对于这个函数,你可以像对待其他JavaScript函数那样做你想做的任何事——call()、 bind()等等。testFunc.toString()返回一个有趣的结果:
function 0() { [native code] }
这带给你关于封装类型特征的更多理解。
关于导出的WebAssembly函数的一些其他值得关注的特性: