javascript - 使用数组应用多个 mixin

Question

使用 ES6 有没有办法应用数组中定义的多个 mixin？ mixins 的定义如下:

const mixins = Array('Mixin', 'Mixin2');

然后创建一个 mixin:

export const Mixin = function (superClass) {
return class extends superClass {}

并将 mixin 与以下内容一起使用:

export class MyClass extends MultipleMixins(BaseClass)

Answer 1

您可以在 mixins 数组上使用 reduce()，传入基类并不断返回新的混合类。这将按顺序应用所有混合:

class BaseClass {
  constructor(name) {
    this.name = name
  }
}

// adds an uppercase
const Mixin = function(superClass) {
  return class extends superClass {
    get uppercase() {
      this.name = this.name.toUpperCase()
      return this
    }
  }
}

//adds a reverse
const Mixin2 = function(superClass) {
  return class extends superClass {
    get reverse() {
      this.name = [...this.name].reverse().join('')
      return this
    }
  }
}

let mixins = [Mixin, Mixin2]

let MixedClass = mixins.reduce((base, mix) => mix(base), BaseClass)

let instance = new MixedClass('mark')
// use the new methods
console.log("reversed & uppercase:", instance.uppercase.reverse.name)