javascript - 用于对象叠瓦的漂亮 JavaScript 模式(模拟多重继承)

Question

我想创建一个继承 2 个类(来自外部库)的 ES6 类，但 ES6 不允许这样做。我也不能使用 mixins。叠瓦似乎是我唯一的选择。

举个例子，假设我想要一个直接发出事件、日志内容等的 UI 组件类(出于多态目的)。

我想避免以下模式:

class UIComponent extends React.Component {
    constructor(props) {
        super(props);
        this.ee = new EventEmitter();
    }

    /*
     *   methods of my UIComponent
     */
    emitThis( val ) {
        this.emit('thisEvent', val);
    },

    onThat( func ) {
        this.on('thatEvent', func);
    },

    doThis() {
        this.specificLog("i'm doing this");
        // do stuff
    }

    /*
     *   Here i just implement all methods of EventEmitter...
     */
    on(...args) {
        this.ee.on(...args);
    }

    once(...args) {
        this.ee.once(...args);
    }

    emit(...args) {
        this.ee.emit(...args);
    }

    /* this goes on and on... */
}

Javascript(ES5、ES6、ES2015)是否允许一些更好的模式用于此目的？

Answer 1

ES6 中的模式基本上是一种混合，将父原型(prototype)深度复制到子原型(prototype)，类似这样

class FosterParent { ...}

class Child extends Parent { ...}

let proto = FosterParent.prototype;

do {
  for (const key of Object.keys(proto))
    if (!(key in Child.prototype))
      Child.prototype[key] = proto[key];
} while (proto = Object.getPrototypeOf(proto))

上面的代码过于简单，因为它复制可枚举键而不是描述符。

在 ES.Next 或 TypeScript 装饰器中可以解决这个问题。 @mixin decorator from core-decorators package应该做与描述相同的事情，但语法简洁:

class FosterParent { ...}

@mixin(FosterParent)
class Child extends Parent { ...}