• 混合
    • 关于混合的例子
    • 理解例子

    混合

    在使用传统的面向对象语言时，一个基于类构建可重用组件的办法是，让一个类基于多个简单的类。你可能对Scala语言中“混合”的概念有所知晓。类似的概念如今在JavaScript社区中也越来越流行。

    关于混合的例子

    下面的例子展示了TypeScript中的混合：

    1. // Disposable Mixin
    2. class Disposable {
    3.     isDisposed: boolean;
    4.     dispose() {
    5.         this.isDisposed = true;
    6.     }
    8. }
    10. // Activatable Mixin
    11. class Activatable {
    12.     isActive: boolean;
    13.     activate() {
    14.         this.isActive = true;
    15.     }
    16.     deactivate() {
    17.         this.isActive = false;
    18.     }
    19. }
    21. class SmartObject implements Disposable, Activatable {
    22.     constructor() {
    23.         setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    24.     }
    26.     interact() {
    27.         this.activate();
    28.     }
    30.     // Disposable
    31.     isDisposed: boolean = false;
    32.     dispose: () => void;
    33.     // Activatable
    34.     isActive: boolean = false;
    35.     activate: () => void;
    36.     deactivate: () => void;
    37. }
    38. applyMixins(SmartObject, [Disposable, Activatable])
    40. var smartObj = new SmartObject();
    41. setTimeout(() => smartObj.interact(), 1000);
    43. ////////////////////////////////////////
    44. // In your runtime library somewhere
    45. ////////////////////////////////////////
    47. function applyMixins(derivedCtor: any, baseCtors: any[]) {
    48.     baseCtors.forEach(baseCtor => {
    49.         Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
    50.             derivedCtor.prototype[name] = baseCtor.prototype[name];
    51.         })
    52.     });
    53. }

    理解例子

    上文的例子以两个类开始，这两个类专注于各自的活动和功能。在后面我们将它们混合入一个新类来同时获取它们两个的功能。

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

    然后，我们将这个类混合入了一个新类，让我们仔细看看它的语法：

    1. class SmartObject implements Disposable, Activatable {

    你可能很快注意到，我们并没有使用extends关键字，而是使用了implements。这会将类视为接口，然后只使用Disposable和Activatable这两个类背后的类型声明，而不是具体实现。这意味着在后面，我们需要自己在类中提供实现细节。这可能并不是我们喜欢做的。

    为了不重新提供实现细节，我们创建了同名属性，并且提供了同样的类型。这会告诉编译器这些成员在运行时将会可用，这将让我们不用机械地重新抄写一遍同样的代码：

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

    最后，我们将其混合入类中，补全了具体的实现：

    1. applyMixins(SmartObject, [Disposable, Activatable])

    applyMixins是我们创建的一个辅助函数。这将会遍历我们被混合的类的原型，将其的具体实现赋值给最终类：

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