WebAssembly入门笔记[3]：利用Table传递引用

来源：cnblogs　　作者：Artech　　时间：2024/1/29 10:53:37　　对本文有异议

在《WebAssembly入门笔记[2]》中，我们介绍了如何利用Memory在作为宿主的JavaScript应用和wasm模块之间传递数据，但是Memory面向单纯二进制字节的读写在使用起来还是不太方便，此时我们会更多地用到另一个重要的对象Table。Table利用用来存储一组指定类型的对象，说得准确一点是对象的引用，所以可以读取出来直接消费。

一、利用Table存储wasm函数引用
二、执行call_indirect执行函数
三、利用Table存储JavaScript函数引用

一、利用Table存储wasm函数引用

就目前的版本来说，Table只支持funcref和externref两种引用类型，前者表示wasm原生函数，后者则用来存储宿主程序提供的任何JavaScript对象，所以如果存储JavaScript函数，Table元素的类型必需指定为externref。下面的实例演示了这样的场景：wasm模块将自身定义的函数存储在导出的Table中供宿主程序使用。

如下所示的采用WebAssembly Text（WAT）格式定义的app.wat文件的定义。我们定义了用来执行加、减、乘、除运算的四个函数，并将它们存储在导出的Table中。由于存储的是wasm函数，所以Table定义语句(table (export "table") funcref (elem $add $sub $mul $div))将元素类型设置为funcref。我们利用elem语句将四个函数的引用填充到Table中。（源代码）

(module
   (func $add (param $op1 i32) (param $op2 i32) (result i32)
     (local.get $op1)
     (local.get $op2)
     (i32.add)
   )
   (func $sub (param $op1 i32) (param $op2 i32) (result i32)
     (local.get $op1)
     (local.get $op2)
     (i32.sub)
   )
   (func $mul (param $op1 i32) (param $op2 i32) (result i32)
     (local.get $op1)
     (local.get $op2)
     (i32.mul)
   )
   (func $div (param $op1 i32) (param $op2 i32) (result i32)
     (local.get $op1)
     (local.get $op2)
     (i32.div_u)
   )
  (table (export "table") funcref (elem $add $sub $mul $div))
)

上面的定义主要是为了解释wasm基于“堆栈”的参数传递方式，代码相对繁琐。如果切换如下所示的“嵌套模式”，就会简洁很多。（源代码）

(module
   (func $add (param $op1 i32) (param $op2 i32) (result i32)
        (i32.add (local.get $op1) (local.get $op2))
   )
   (func $sub (param $op1 i32) (param $op2 i32) (result i32)
        (i32.sub (local.get $op1) (local.get $op2))
   )
   (func $mul (param $op1 i32) (param $op2 i32) (result i32)
        (i32.mul (local.get $op1) (local.get $op2))
   )
   (func $div (param $op1 i32) (param $op2 i32) (result i32)
        (i32.div_u (local.get $op1) (local.get $op2))
   )
  (table (export "table") funcref (elem $add $sub $mul $div))
)

在承载宿主应用的index.html中，在得到导出的Table对象之后，我们将存储（0-3）的位置作为参数调用其get方法得到对应的wasm函数。我们传入相同的参数（2，1）调用这四个函数。

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script>
            WebAssembly
                .instantiateStreaming(fetch("app.wasm"))
                .then(results => {
                    var table = results.instance.exports.table;
                    document.getElementById("container").innerHTML =
                    `<p>2 + 1 = ${table.get(0)(2,1)}</p>`+
                    `<p>2 - 1 = ${table.get(1)(2,1)}</p>`+
                    `<p>2 * 1 = ${table.get(2)(2,1)}</p>`+
                    `<p>2 / 1 = ${table.get(3)(2,1)}</p>`;
                });
        </script>
    </body>
</html>

我们将包含结果的运算表达式格式化成HTML，所以页面加载后将会呈现出如下的输出。

二、执行call_indirect执行函数

对于存储在Table中的wasm函数，我们还可以按照如下的方式执行call_indirect指令间接执行它。执行call_indirect指定时需要以”类型“的形式确定待执行函数的签名，由于四个函数的签名都是一致的（两个参数和返回值类型均为i32类型），所以我们定义了一个名为$i32_i32_i32的函数类型。（源代码）

(module
   (func $add (param $op1 i32) (param $op2 i32) (result i32)
        (i32.add (local.get $op1) (local.get $op2))
   )
   (func $sub (param $op1 i32) (param $op2 i32) (result i32)
        (i32.sub (local.get $op1) (local.get $op2))
   )
   (func $mul (param $op1 i32) (param $op2 i32) (result i32)
        (i32.mul (local.get $op1) (local.get $op2))
   )
   (func $div (param $op1 i32) (param $op2 i32) (result i32)
        (i32.div_u (local.get $op1) (local.get $op2))
   )
   (table funcref (elem $add $sub $mul $div))
 
   (type $i32_i32_i32 (func (param i32) (param  i32) (result i32)))
   (func (export "calc") (param $index i32) (param $op1 i32) (param $op2 i32) (result i32)
       (call_indirect (type $i32_i32_i32)  (local.get $op1) (local.get $op2) (local.get $index))
   )
)

我们定义了名为calc的导出函数执行存储在Table中的函数，该函数的第一个参数$index表示函数在Table中的位置，后续两个参数才是算数操作数。传入call_indirect指令的4个参数分别是函数类型、传入目标函数的参数和函数在Table中的位置。index.html中的JavaScript代码以如下的方式调用导出函数calc，所以页面会呈现出与上面相同的输出。

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script>
            WebAssembly
                .instantiateStreaming(fetch("app.wasm"))
                .then(results => {
                    var calc = results.instance.exports.calc;
                    document.getElementById("container").innerHTML =
                    `<p>2 + 1 = ${calc(0, 2 ,1)}</p>`+
                    `<p>2 - 1 = ${calc(1, 2 ,1)}</p>`+
                    `<p>2 * 1 = ${calc(2, 2 ,1)}</p>`+
                    `<p>2 / 1 = ${calc(3, 2 ,1)}</p>`;
                });
        </script>
    </body>
</html>

三、利用Table存储JavaScript函数引用

第一个实例演示了将wasm函数存储在Table中供JavaScript应用调用，那么是否可以反其道而行之，将JavaScript函数存储在Table中传入wasm模块中执行呢？答案是不可能，至少目前不可以。我们在前面提到过，包含函数在内的JavaScript对象只能以externref的形式存在在Table中，对于externref，wasm模块无法对其”解引用“，自然也不能直接对它进行消费。

但是我们可以将它们回传到作为宿主的JavaScript应用中执行，下面的代码很好地演示了这一点。这次我们选择在JavaScript应用中创建Table，并将其导入到wasm模块。如下面的代码片段所示，一并导入的还有一个被命名为$apply函数。这个函数具有三个参数，第一个参数类型为externref，表示存储在Table中的JavaScript函数，后面两个参数运算操作上。（源代码）

(module
    (import "imports" "table" (table 4 externref))
    (func $apply (import "imports" "apply") (param externref) (param i32) (param i32))
    (func $calc (param $index i32) (param $op1 i32) (param $op2 i32)
         (call $apply (table.get (local.get $index)) (local.get $op1) (local.get $op2))
    )
    (func (export "calculate") (param $op1 i32) (param $op2 i32)
       (call $calc (i32.const 0) (local.get $op1) (local.get $op2))
       (call $calc (i32.const 1) (local.get $op1) (local.get $op2))
       (call $calc (i32.const 2) (local.get $op1) (local.get $op2))
       (call $calc (i32.const 3) (local.get $op1) (local.get $op2))
    )
)

JavaScript函数的执行实现在$calc函数中，它的第一个参数表示函数在Table中的位置。我们通过执行table.get指令得到存储在Table以externref形式存在的JavaScript函数，并将它和两个操作数作为参数调用导入的$apply函数。导出函数calculate调用$calc函数完成针对4中运算的执行。

导入的apply函数在index.html中以如下的形式定义。我们调用构造函数WebAssembly.Table创建了一个Table对象，并将初始化大小和元素类型设置为4和externref。我们调用Table对象的set方法将四个JavaScript函数存储在这个Table中，四个函数会执行加、减、乘、除运算并将表达式拼接在html字符串上，后者将会作为<div>的innerHTML，所以页面程序的输出还是与上面一致。

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script>
            var html = "";
            var apply = (func, op1, op2)=> func(op1, op2);
            const table = new WebAssembly.Table({ initial: 4, element: "externref" });
 
            table.set(0, (op1, op2)=> html += `<p>${op1} + ${op2} = ${op1 + op2}</p>`);
            table.set(1, (op1, op2)=> html += `<p>${op1} - ${op2} = ${op1 - op2}</p>`);
            table.set(2, (op1, op2)=> html += `<p>${op1} * ${op2} = ${op1 * op2}</p>`);
            table.set(3, (op1, op2)=> html += `<p>${op1} / ${op2} = ${op1 / op2}</p>`);
 
            WebAssembly
                .instantiateStreaming(fetch("app.wasm"), {"imports":{"table":table, "apply":apply}})
                .then(results => {
                    html = "";
                    results.instance.exports.calculate(4,2);
                    document.getElementById("container").innerHTML = html;
                });
        </script>
    </body>
</html>