如何向 ES6 javascript 类添加 mixins？

Question

在带有一些实例变量和方法的 ES6 类中，如何向其中添加 mixin？我在下面给出了一个例子，虽然我不知道 mixin 对象的语法是否正确。

class Test {
  constructor() {
    this.var1 = 'var1'
  }
  method1() {
    console.log(this.var1)
  }
  test() {
    this.method2()
  }
}

var mixin = {
  var2: 'var2',
  method2: {
    console.log(this.var2)
  }
}

如果我运行(new Test()).test()，它将失败，因为类上没有method2，因为它在mixin中，这就是为什么我需要将mixin变量和方法添加到类中。

我看到有一个 lodash mixin 函数https://lodash.com/docs/4.17.4#mixin，但我不知道如何将它与 ES6 类一起使用。我可以使用 lodash 作为解决方案，甚至可以使用没有库的普通 JS 来提供 mixin 功能。

Answer 1

Javascript 的对象/属性系统比大多数语言动态得多，因此向对象添加功能非常容易。由于函数是一等对象，它们可以以完全相同的方式添加到对象中。 Object.assign 是将一个对象的属性添加到另一个对象的方法。 （它的行为在很多方面都可以与_.mixin 媲美。）

Javascript 中的类只是使添加构造函数/原型对变得简单明了的语法糖。该功能与 ES6 之前的代码相比没有变化。

您可以将属性添加到原型中：

Object.assign(Test.prototype, mixin);

您可以在构造函数中将它添加到创建的每个对象：

constructor() {
    this.var1 = 'var1';
    Object.assign(this, mixin);
}

您可以根据条件将其添加到构造函数中：

constructor() {
    this.var1 = 'var1';
    if (someCondition) {
        Object.assign(this, mixin);
    }
}

或者您可以在创建对象后将其分配给对象：

let test = new Test();
Object.assign(test, mixin);

Answer 2

在 es6 中，您可以在不分配的情况下执行此操作，甚至可以在正确的时间调用 mixin 构造函数！

http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/#bettermixinsthroughclassexpressions

此模式使用class expressions 为每个mixin 创建一个新的基类。

let MyMixin = (superclass) => class extends superclass {
  foo() {
    console.log('foo from MyMixin');
  }
};

class MyClass extends MyMixin(MyBaseClass) {
  /* ... */
}

Answer 3

你应该看看Object.assign()。看起来应该是这样的：

Object.assign(Test.prototype, mixin);

这将确保来自mixin 的所有方法和属性都将被复制到Test 构造函数的原型对象中。