blob: 6d8b728b22703b6a1f0a10362ec88bf50bf0bd43 (
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
|
---
title: Exported WebAssembly functions
slug: WebAssembly/Exported_functions
translation_of: WebAssembly/Exported_functions
---
<div>{{WebAssemblySidebar}}</div>
<p class="summary">Exported WebAssembly functions는 JavaScript에서 WebAssembly 함수를 나타내는 방법입니다. 여기서는 이 함수들에 대해 더 자세히 설명합니다.</p>
<h2 id="Exported..._뭐요">Exported... 뭐요?</h2>
<p>내보낸 WebAssembly 함수는 기본적으로 JavaScript에서 WebAssembly 함수를 나타내는 JavaScript 래퍼입니다. 호출 할 때 배경에서 백그라운드로 액티비티를 가져와 wasm이 작업 할 수있는 유형 (예 : JavaScript 숫자를 Int32로 변환)으로 변환하고, 인수가 wasm 모듈 내부의 함수로 전달되고, 함수가 호출되며, 결과가 변환되어 JavaScript로 다시 전달됩니다.</p>
<p>두 가지 방법으로 내 보낸 WebAssembly 함수를 검색 할 수 있습니다.</p>
<ul>
<li>기존 테이블에서 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code>을 호출합니다.</li>
<li><code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code>를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.</li>
</ul>
<p>어느 쪽이든, 기본 함수에 대해 동일한 종류의 래퍼를 사용합니다. JavaScript의 관점에서 볼 때, 모든 wasm 함수가 JavaScript 함수이기도하지만 - 내보낸 wasm 함수 객체 인스턴스에 의해 캡슐화되며 액세스 할 수있는 제한된 방법이 있습니다.</p>
<h2 id="An_example">An example</h2>
<p>예제를 보겠습니다. (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a>로 찾을 수 있으며 실시간으로 보기(<a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">running live also</a>)도 참고하시고. wasm <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">text representation</a> 표현도 확인하세요).</p>
<pre class="brush: js">var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });
WebAssembly.instantiateStreaming(fetch('table.wasm'))
.then(obj => {
var tbl = obj.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)());
});</pre>
<p>{{jsxref("WebAssembly.Table")}}생성자를 사용하여 JavaScript에서 테이블 (<code>otherTable</code>)을 만든 다음 {{jsxref("WebAssembly.instantiateStreaming()")}}를 메서드를 사용하여 table.wasm를 우리가 만든 페이지에 로드합니다.</p>
<p> </p>
<p>그런 다음 모듈에서 함수를 내보내고 <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a></code>을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 <code>set()</code>을 사용하여 <code>otherTable</code> 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.</p>
<p>이를 증명하기 위해 우리는 이러한 참조를 <code>otherTable</code>에서 다시 검색하여 그 결과를 콘솔에도 출력하므로 동일한 결과를 얻을 수 있습니다.</p>
<h2 id="They_are_real_functions">They are real functions</h2>
<p>앞의 예에서 각 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.</p>
<p>이것들은 WebAssembly 함수에 대한 래퍼 (wrapper)가 될뿐만 아니라 실제 JavaScript 함수임을 주목할 필요가 있습니다. 위의 예제를 <a href="/en-US/docs/WebAssembly#Browser_compatibility">WebAssembly-supporting browser</a>에 로드하고 콘솔에서 다음 줄을 실행하세요.</p>
<pre class="brush: js">var testFunc = otherTable.get(0);
typeof testFunc;</pre>
<p>그러면 결과 함수(<code>function</code>)가 반환됩니다. 그런 다음 JavaScript에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> 등의 다른 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">functions</a>를 수행 할 수 있는 기능을 수행 할 수 있습니다. <code>testFunc.toString()</code>은 흥미로운 결과를 반환합니다.</p>
<pre class="brush: js">function 0() {
[native code]
}</pre>
<p>이렇게하면 wrapper-type의 본질에 대해 더 많이 알 수 있습니다.</p>
<p>exported WebAssembly functions에 대해 알아야 할 몇 가지 사항은 다음과 같습니다.</p>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> 속성은 wasm 함수 시그니처에 선언 된 인수의 개수입니다.</li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> 속성은 wasm 모듈에서 함수의 인덱스에 대한 <code>toString()</code> 결과입니다.</li>
<li>i64 유형 값을 사용하거나 가져 오는 내 보낸 wasm 함수를 호출하려고하면 JavaScript는 현재 i64를 정확하게 표현할 방법이 없기 때문에 현재 오류가 발생합니다. 이후에 개선 될 것입니다. - 새로운 int64 유형이 wasm에 의해 사용될 수 있도록 향후 표준으로 고려되고 있습니다.</li>
</ul>
|
