从 JS 导入类

就像我们开始导出函数一样，我们也需要导入！现在我们已经将一个 `class` 导出到 JS，我们也需要能够在 Rust 中导入类，以便调用方法等。由于 JS 类通常只是 JS 对象，因此这里的绑定看起来与上面描述的 JS 对象绑定非常相似。

像往常一样，让我们深入研究一个例子！

#![allow(unused)]
fn main() {
#[wasm_bindgen(module = "./bar")]
extern "C" {
    type Bar;

    #[wasm_bindgen(constructor)]
    fn new(arg: i32) -> Bar;

    #[wasm_bindgen(js_namespace = Bar)]
    fn another_function() -> i32;

    #[wasm_bindgen(method)]
    fn get(this: &Bar) -> i32;

    #[wasm_bindgen(method)]
    fn set(this: &Bar, val: i32);

    #[wasm_bindgen(method, getter)]
    fn property(this: &Bar) -> i32;

    #[wasm_bindgen(method, setter)]
    fn set_property(this: &Bar, val: i32);
}

fn run() {
    let bar = Bar::new(Bar::another_function());
    let x = bar.get();
    bar.set(x + 3);

    bar.set_property(bar.property() + 6);
}
}

与我们之前的导入不同，这个导入更详细！请记住，`wasm-bindgen` 的目标之一是在可能的情况下使用原生 Rust 语法，因此这主要是为了使用 `#[wasm_bindgen]` 属性来解释在 Rust 中写下的内容。现在这里有一些属性注释，让我们逐个进行解释。

`#[wasm_bindgen(module = "./bar")]` - 在导入中之前见过，这是声明所有后续功能从哪里导入的。例如，`Bar` 类型将从 `./bar` 模块导入。
`type Bar` - 这是在 Rust 中将 JS 类声明为一个新类型。这意味着将生成一个新的类型 `Bar`，它是不透明的，但内部表示为包含一个 `JsValue`。我们将在后面看到更多关于这方面的知识。
`#[wasm_bindgen(constructor)]` - 这表示绑定的名称实际上并没有在 JS 中使用，而是翻译成 `new Bar()`。此函数的返回值必须是裸类型，例如 `Bar`。
`#[wasm_bindgen(js_namespace = Bar)]` - 此属性表示函数声明在 JS 中通过 `Bar` 类进行命名空间。
`#[wasm_bindgen(static_method_of = SomeJsClass)]` - 此属性类似于 `js_namespace`，但它不是生成一个自由函数，而是生成 `SomeJsClass` 的一个静态方法。
`#[wasm_bindgen(method)]` - 最后，此属性表示将发生方法调用。第一个参数必须是 JS 结构体，例如 `Bar`，并且 JS 中的调用看起来像 `Bar.prototype.set.call(...)`。

考虑到所有这些，让我们看一下生成的 JS。

import * as wasm from './foo_bg';

import { Bar } from './bar';

// other support functions omitted...

export function __wbg_s_Bar_new() {
  return addHeapObject(new Bar());
}

const another_function_shim = Bar.another_function;
export function __wbg_s_Bar_another_function() {
  return another_function_shim();
}

const get_shim = Bar.prototype.get;
export function __wbg_s_Bar_get(ptr) {
  return shim.call(getObject(ptr));
}

const set_shim = Bar.prototype.set;
export function __wbg_s_Bar_set(ptr, arg0) {
  set_shim.call(getObject(ptr), arg0)
}

const property_shim = Object.getOwnPropertyDescriptor(Bar.prototype, 'property').get;
export function __wbg_s_Bar_property(ptr) {
  return property_shim.call(getObject(ptr));
}

const set_property_shim = Object.getOwnPropertyDescriptor(Bar.prototype, 'property').set;
export function __wbg_s_Bar_set_property(ptr, arg0) {
  set_property_shim.call(getObject(ptr), arg0)
}

就像从 JS 导入函数时一样，我们可以看到为所有相关函数生成了一堆垫片。`new` 静态函数具有 `#[wasm_bindgen(constructor)]` 属性，这意味着它应该实际调用 `new` 构造函数，而不是任何特定方法（正如我们在这里看到的那样）。然而，静态函数 `another_function` 被分派为 `Bar.another_function`。

`get` 和 `set` 函数是方法，因此它们通过 `Bar.prototype` 进行，否则它们的第一个参数隐式地是 JS 对象本身，该对象通过 `getObject` 加载，就像我们之前看到的那样。

一些真正重要的内容开始在 Rust 方面出现，所以让我们看一下。

#![allow(unused)]
fn main() {
pub struct Bar {
    obj: JsValue,
}

impl Bar {
    fn new() -> Bar {
        extern "C" {
            fn __wbg_s_Bar_new() -> u32;
        }
        unsafe {
            let ret = __wbg_s_Bar_new();
            Bar { obj: JsValue::__from_idx(ret) }
        }
    }

    fn another_function() -> i32 {
        extern "C" {
            fn __wbg_s_Bar_another_function() -> i32;
        }
        unsafe {
            __wbg_s_Bar_another_function()
        }
    }

    fn get(&self) -> i32 {
        extern "C" {
            fn __wbg_s_Bar_get(ptr: u32) -> i32;
        }
        unsafe {
            let ptr = self.obj.__get_idx();
            let ret = __wbg_s_Bar_get(ptr);
            return ret
        }
    }

    fn set(&self, val: i32) {
        extern "C" {
            fn __wbg_s_Bar_set(ptr: u32, val: i32);
        }
        unsafe {
            let ptr = self.obj.__get_idx();
            __wbg_s_Bar_set(ptr, val);
        }
    }

    fn property(&self) -> i32 {
        extern "C" {
            fn __wbg_s_Bar_property(ptr: u32) -> i32;
        }
        unsafe {
            let ptr = self.obj.__get_idx();
            let ret = __wbg_s_Bar_property(ptr);
            return ret
        }
    }

    fn set_property(&self, val: i32) {
        extern "C" {
            fn __wbg_s_Bar_set_property(ptr: u32, val: i32);
        }
        unsafe {
            let ptr = self.obj.__get_idx();
            __wbg_s_Bar_set_property(ptr, val);
        }
    }
}

impl WasmBoundary for Bar {
    // ...
}

impl ToRefWasmBoundary for Bar {
    // ...
}
}

在 Rust 中，我们看到为这个类导入生成了一个新的类型 `Bar`。类型 `Bar` 内部包含一个 `JsValue`，因为 `Bar` 的实例旨在表示存储在我们模块的堆栈/slab 中的 JS 对象。然后，它的工作方式与我们在开头看到的 JS 对象的工作方式基本相同。

当调用 `Bar::new` 时，我们将得到一个包装在 `Bar` 中的索引（当剥离后，它本身在内存中只是一个 `u32`）。然后，每个函数将索引作为第一个参数传递，并在 Rust 中转发所有其他内容。

`wasm-bindgen` 指南

从 JS 导入类