Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-cn: replace the deprecated functions in example #25174

Merged
merged 2 commits into from
Dec 21, 2024
Merged

zh-cn: replace the deprecated functions in example #25174

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ca5a09
correcting function reference in example
Stan-BK Dec 20, 2024
366b344
Update index.md
yin1999 Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions files/zh-cn/webassembly/exported_functions/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ slug: WebAssembly/Exported_functions

你可以通过两种方式来获得导出的 WebAssembly 函数：

- 在一个已经存在的表格上调用 [Table.prototype.get()](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get)。
- 通过 [Instance.exports](/zh-CN/docs/WebAssembly/JavaScript_interface/Instance/exports) 从一个 wasm 模块实例获取导出的函数。
- 在一个已经存在的表格上调用 [`Table.prototype.get()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get)。
- 通过 [`Instance.exports`](/zh-CN/docs/WebAssembly/JavaScript_interface/Instance/exports) 从一个 wasm 模块实例获取导出的函数。

无论哪种方式，你得到的都是底层函数的相同封装。从 JavaScript 的角度来看，每一个 wasm 函数看起来也是一个 JavaScript 函数——但是，它们被封装在导出的 wasm 函数对象实例中，并且只有有限的方式来获取它们。

Expand All @@ -23,10 +23,10 @@ slug: WebAssembly/Exported_functions
让我们看个例子从而让事情更清晰（你可以在 GitHub 上找到这个例子 [table-set.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html)；或者[实时运行](https://mdn.github.io/webassembly-examples/other-examples/table-set.html)然后查看 wasm [文本表示](https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table.wat)）：

```js
var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });
const otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });

fetchAndInstantiate("table.wasm").then(function (instance) {
var tbl = instance.exports.tbl;
WebAssembly.instantiateStreaming(fetch("table.wasm")).then((obj) => {
const tbl = obj.instance.exports.tbl;
console.log(tbl.get(0)()); // 13
console.log(tbl.get(1)()); // 42
otherTable.set(0, tbl.get(0));
Expand All @@ -36,26 +36,26 @@ fetchAndInstantiate("table.wasm").then(function (instance) {
});
```

在这里，我们使用 [WebAssembly.Table](/zh-CN/docs/WebAssembly/JavaScript_interface/Table) 构造函数在 JavaScript 中创建了一个表格（otherTable），然后使用 [fetchAndInstantiate()](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 实用函数把 table.wasm 加载到我们的页面。
在这里，我们使用 [`WebAssembly.Table`](/zh-CN/docs/WebAssembly/JavaScript_interface/Table) 构造函数在 JavaScript 中创建了一个表格（`otherTable`），然后使用 [`WebAssembly.instantiateStreaming()`](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiateStreaming_static) 把 `table.wasm` 加载到我们的页面。

然后，我们得到了从模块中导出的函数，通过 [tbl.get()](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get) 获取引用的函数并且把每一次的调用结果输出到控制台。接下来，我们使用 set() 使得 otherTable 表格包含了与 tbl 表格相同的函数。
然后，我们得到了从模块中导出的函数，通过 [`tbl.get()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get) 获取引用的函数并且把每一次的调用结果输出到控制台。接下来，我们使用 `set()` 使得 `otherTable` 表格包含了与 `tbl` 表格相同的函数。

为了证明这一点，我们从 otherTable 中获取了这些引用并且也把他们的结果打印到控制台，结果是一样的。
为了证明这一点，我们从 `otherTable` 中获取了这些引用并且也把他们的结果打印到控制台，结果是一样的。

## 它们确实是函数

在前面的例子中，每次 [Table.prototype.get()](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get) 调用的返回值都是一个导出的 WebAssembly 函数——这正是我们一直在讨论的。
在前面的例子中，每次 [`Table.prototype.get()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Table/get) 调用的返回值都是一个导出的 WebAssembly 函数——这正是我们一直在讨论的。

它们确实是 JavaScript 函数也是对 WebAssembly 函数的封装。如果你把上面的例子加载到[支持 WebAssembly 的浏览器](/zh-CN/docs/WebAssembly#browser_compatibility)中，然后在你的控制台运行下面几行代码：
它们确实是 JavaScript 函数也是对 WebAssembly 函数的封装。如果你把上面的例子加载到[支持 WebAssembly 的浏览器](/zh-CN/docs/WebAssembly#浏览器兼容性)中，然后在你的控制台运行下面几行代码：

```js
var testFunc = otherTable.get(0);
const testFunc = otherTable.get(0);
typeof testFunc;
```

你得到的返回结果是 function。对于这个函数，你可以像对待其他 JavaScript [函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)那样做你想做的任何事——[call()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[bind()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 等等。testFunc.toString() 返回一个有趣的结果：
你得到的返回结果是 function。对于这个函数，你可以像对待其他 JavaScript [函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)那样做你想做的任何事——[`call()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`bind()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 等等。`testFunc.toString()` 返回一个有趣的结果：

```js
```plain
function 0() {
[native code]
}
Expand All @@ -66,5 +66,5 @@ function 0() {
关于导出的 WebAssembly 函数的一些其他值得关注的特性：

- 它们的 [length](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length) 属性是在 wasm 函数签名中声明的参数的数量。
- 它们的 [name](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name) 属性是函数在 wasm 模块中的索引调用 toString() 的返回值。
- 它们的 [name](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name) 属性是函数在 wasm 模块中的索引调用 `toString()` 的返回值。
- 如果你尝试调用一个接受或返回一个 i64 类型值的导出的 wasm 函数，目前它会抛出一个错误，因为 JavaScript 当前没有精确的方式来表示一个 i64。不过，这在将来可能会改变——在将来的标准中，新的 int64 类型正在考虑之中。到那时，wasm 可以使用它。
Loading