From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../webassembly/exported_functions/index.html | 76 ++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 files/zh-cn/webassembly/exported_functions/index.html (limited to 'files/zh-cn/webassembly/exported_functions') diff --git a/files/zh-cn/webassembly/exported_functions/index.html b/files/zh-cn/webassembly/exported_functions/index.html new file mode 100644 index 0000000000..c19706f594 --- /dev/null +++ b/files/zh-cn/webassembly/exported_functions/index.html @@ -0,0 +1,76 @@ +--- +title: 导出的WebAssembly函数 +slug: WebAssembly/Exported_functions +tags: + - JavaScript + - WebAssembly + - wasm + - 导出 + - 导出的wasm函数 + - 导出的函数 + - 指南 +translation_of: WebAssembly/Exported_functions +--- +
{{WebAssemblySidebar}}
+ +

导出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函数的一些其他值得关注的特性：

+ + -- cgit v1.2.3-54-g00ecf