混合（Mixins）

在传统的面向对象继承（OO hierarchies）中，通过组合可复用的组件（即一些更简单的类）来构造新的类是非常流行的做法。如果你熟悉像Scala这类语言的话，你对这种做法应该不会陌生。并且这种模式在JavaScript社区中也比较流行。

Mixin的例子

在下面的代码中，我们展示了如何在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 {

你可能会马上注意到在上面的例子中，我们用’implements’来代替’extends’关键字。这表示我们把这两个类当作是接口。并且与其说我们使用了’Disposable’和’Activatable’的实现，倒不如说是使用了它们的类型。也就是说我们还需要在类中提供这二者的实现。Except, that’s exactly what we want to avoid by using mixins.

为了满足我们的需求，我们要为被混合的类的成员创建替身（stand-in）属性及类型。这使得编译器在运行时可以获得这个类的成员。虽然这种记账式的做法会花费我们些时间，但之后我们就能从mixins中受益了。

  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])

我们最后还创建了一个辅助函数来帮我们完成混合的工作。它会查询并复制每个被混合的类的属性，填充实现的类中的每一个属性。

  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. }