aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/global_objects/webassembly/table/index.html
blob: 9582758e329219f3b748d38eb6bc5b4aca8ea21e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
---
title: WebAssembly.Table()
slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
---
<div>{{JSRef}}</div>

<p><code><strong>WebAssembly.Table()</strong></code> 构造函数根据给定的大小和元素类型创建一个Table对象。 </p>

<p>这是一个包装了WebAssemble Table 的Javascript包装对象,具有类数组结构,存储了多个函数引用。在Javascript或者WebAssemble中创建Table 对象可以同时被Javascript或WebAssemble 访问和更改。</p>

<div class="note">
<p><strong>Note</strong>: Tables 对象目前只能存储函数引用,不过在将来可能会被扩展。</p>
</div>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">var myTable = new WebAssembly.Table(tableDescriptor);</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><em>tableDescriptor</em></dt>
 <dd>该对象具有以下属性:
 <dl>
  <dt><em>element</em></dt>
  <dd>一个表明储存在该Table中对象的类型。 目前只能是: <code>"anyfunc"</code> (函数)。</dd>
  <dt><em>initial</em></dt>
  <dd>该WebAssembly Table初始大小。</dd>
  <dt><em>maximum {{optional_inline}}</em></dt>
  <dd>该WebAssembly Table允许扩展到的最大大小。</dd>
 </dl>
 </dd>
</dl>

<h3 id="异常">异常</h3>

<ul>
 <li>如果 <code>tableDescriptor</code> 不是对象类型, 将会抛出 {{jsxref("TypeError")}} 异常。</li>
 <li>如果申明了 <code>maximum</code> 属性并且比 <code>initial小</code>, 将会抛出{{jsxref("RangeError")}} 异常。</li>
</ul>

<h2 id="Table_Instance"><code>Table</code> Instance</h2>

<p>所有<code>Table</code>实例都继承自<code>Table()</code>构造函数的<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype">原型对象</a>-可以对其进行修改以影响所有<code>Table</code>实例。</p>

<h3 id="Instance_属性">Instance 属性</h3>

<dl>
 <dt><code>Table.prototype.constructor</code></dt>
 <dd>返回创建该对象实例的函数。默认情况下,这是{{jsxref("WebAssembly.Table()")}} 的构造函数。</dd>
 <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
 <dd>返回Table的长度,即元素数。</dd>
</dl>

<h3 id="Instance_methods">Instance methods</h3>

<dl>
 <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt>
 <dd>Accessor function — gets the element stored at a given index.</dd>
 <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt>
 <dd>Increases the size of the Table instance by a specified number of elements.</dd>
 <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt>
 <dd>Sets an element stored at a given index to a given value.</dd>
</dl>

<h2 id="例子">例子</h2>

<p>The following example (see table2.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">source code</a> and <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">live version</a>) creates a new WebAssembly Table instance with an initial size of 2 elements. We then print out the table length and contents of the two indexes (retrieved via {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} to show that the length is two and both elements are {{jsxref("null")}}.</p>

<pre class="brush: js notranslate">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
console.log(tbl.length);  // "2"
console.log(tbl.get(0));  // "null"
console.log(tbl.get(1));  // "null"</pre>

<p>We then create an import object that contains the table:</p>

<pre class="brush: js notranslate">var importObj = {
  js: {
    tbl:tbl
  }
};</pre>

<p>Finally, we load and instantiate a wasm module (table2.wasm) using the {{jsxref("WebAssembly.instantiateStreaming()")}} method.  The table2.wasm module contains two functions (one that returns 42 and another that returns 83) and stores both into elements 0 and 1 of the imported table (see <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">text representation</a>).  So after instantiation, the table still has length 2, but the elements now contain callable <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly Functions</a> which we can call from JS.</p>

<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
.then(function(obj) {
  console.log(tbl.length);
  console.log(tbl.get(0)());
  console.log(tbl.get(1)());
});</pre>

<p>Note how you've got to include a second function invocation operator at the end of the accessor to actually invoke the referenced function and log the value stored inside it (e.g. <code>get(0)()</code> rather than <code>get(0)</code>) .</p>

<p>This example shows that we're creating and accessing the table from JavaScript, but the same table is visible and callable inside the wasm instance too.</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td>
   <td>{{Spec2('WebAssembly JS')}}</td>
   <td>Initial draft definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<div>


<p>{{Compat("javascript.builtins.WebAssembly.Table")}}</p>
</div>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
 <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
 <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
</ul>