混入

    混入示例

    ↥ 回到顶端

    除了传统的面向对象继承方式，还流行一种通过可重用组件创建类的方式，就是联合另一个简单类的代码。 你可能在Scala等语言里对mixins及其特性已经很熟悉了，但它在JavaScript中也是很流行的。

    下面的代码演示了如何在TypeScript里使用混入。 后面我们还会解释这段代码是怎么工作的。

    代码里首先定义了两个类，它们将做为mixins。 可以看到每个类都只定义了一个特定的行为或功能。 稍后我们使用它们来创建一个新类，同时具有这两种功能。

    2. class Disposable {
    3.     isDisposed: boolean;
    4.     dispose() {
    5.         this.isDisposed = true;
    6.     }
    9. // Activatable Mixin
    10. class Activatable {
    11.     isActive: boolean;
    12.     activate() {
    14.     }
    15.     deactivate() {
    16.         this.isActive = false;
    17.     }
    18. }

    下面创建一个类，结合了这两个mixins。 下面来看一下具体是怎么操作的：

    它将类视为接口，且只会混入Disposable和Activatable背后的类型到SmartObject类型里，不会混入实现。也就是说，我们要在类里面去实现。 这正是我们想要在混入时避免的行为。

    最后，我们将混入融入到了类的实现中去。

    2. dispose: () => void;
    3. // Activatable
    4. isActive: boolean = false;
    5. activate: () => void;
    6. deactivate: () => void;

    最后，把mixins混入定义的类，完成全部实现部分。

    最后，创建这个帮助函数，帮我们做混入操作。 它会遍历mixins上的所有属性，并复制到目标上去，把之前的占位属性替换成真正的实现代码。

    1. function applyMixins(derivedCtor: any, baseCtors: any[]) {
    2.     baseCtors.forEach(baseCtor => {
    3.         Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
    4.             Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
    5.         })
    6. }