Question

使用ES6是否可以应用数组中定义的多个mixin？混合定义为：

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

然后创建一个带有以下内容的mixin：

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

并在以下情况下使用mixin：

export class MyClass extends MultipleMixins(BaseClass)

Answer 1

您可以在混合类数组上使用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)

使用数组应用多个混合

1 个答案: