原文链接：http://raganwald.com/2015/06/17/functional-mixins.html
在“原型即对象”中，我们看到可以对原型使用 Object.assign 来模拟 mixin，原型是 JavaScript 中类概念的基石。现在我们将回顾这个概念，并进一步探究如何将功能糅合进类。
首先，简单回顾一下：在 JavaScript 中，类是通过一个构造函数和它的原型来定义的，无论你是用 ES5 语法，还是使用 class 关键字。类的实例是通过 new 调用构造器的方式创建的。实例从构造器的 prototype 属性上继承共享的方法。
对象 mixin 模式
如果多个类共享某些行为，或者希望对庞杂的原型对象进行功能提取，这时候就可以使用 mixin 来对原型进行扩展。
如这里的 Todo 类
class Todo {
constructor (name) {
this.name = name || 'Untitled';
this.done = false;
}
do () {
this.done = true;
return this;
}
undo () {
this.done = false;
return this;
}
}
用于颜色编码的 mixin 如下：
const Coloured = {
setColourRGB ({r, g, b}) {
this.colourCode = {r, g, b};
return this;
},
getColourRGB () {
return this.colourCode;
}
};
将颜色编码功能糅合到 Todo 原型上是简而易行的：
Object.assign(Todo.prototype, Coloured);
new Todo('test')
.setColourRGB({r: 1, g: 2, b: 3})
//=> {"name":"test","done":false,"colourCode":{"r":1,"g":2,"b":3}}
我们还可以升级为使用私有属性：
const colourCode = Symbol("colourCode");
const Coloured = {
setColourRGB ({r, g, b}) {
this[colourCode]= {r, g, b};
return this;
},
getColourRGB () {
return this[colourCode];
}
};
至此，非常简单明了。我们将这称为一种 “模式”，像菜谱一样，是解决某种问题的独特的代码组织方式。
函数式 mixin
上面的对象 mixin 功能完好，但用它来解决问题要分两步走：定义 mixin 然后扩展类的原型。Angus Croll 指出将 mixin 定义成函数而不是对象会是更优雅的做法，并称之为函数式 mixin。再次以 Coloured 为例，将它改写成函数的形式：
const Coloured = (target) =>
Object.assign(target, {
setColourRGB ({r, g, b}) {
this.colourCode = {r, g, b};
return this;
},
getColourRGB () {
return this.colourCode;
}
}); Coloured(Todo.prototype);
我们可以定义一个工厂函数，并从命名上体现该模式：
const FunctionalMixin = (behaviour) =>
target => Object.assign(target, behaviour);
现在我们可以精要地定义函数式 mixin:
const Coloured = FunctionalMixin({
setColourRGB ({r, g, b}) {
this.colourCode = {r, g, b};
return this;
},
getColourRGB () {
return this.colourCode;
}
});
可枚举性
如果我们探究 class 声明类的方式下对 prototype 的操作，可以发现声明的方法默认是不可枚举的。这可以避免一个常见问题——遍历实例的 key 时程序员有时忘记检测 .hasOwnProperty。
而我们的对象 mixin 模式无法做到这点，定义在 mixin 中的方法默认是可枚举的。如果我们故意将其设置为不可枚举，Object.assign 就不会将它们糅合到目标原型了，因为 Object.assign 只会将可枚举的属性赋值到目标对象上。
这将导致以下情形：
Coloured(Todo.prototype)
const urgent = new Todo("finish blog post");
urgent.setColourRGB({r: 256, g: 0, b: 0});
for (let property in urgent) console.log(property);
// =>
name
done
colourCode
setColourRGB
getColourRGB
正如所见，setColourRGB 和 getColourRGB 方法被枚举出来了，而 do 和 undo 方法却没有。这对于不健壮的代码会是个问题，因为我们不可能每次都重写别处的代码，处处加上 hasOwnProperty 检测。
该问题使用函数式 mixin 便可迎刃而解，我们可以神乎其神地让 mixin 表现得和 class 声明类似，这是函数式 mixin 的好处之一：
const FunctionalMixin = (behaviour) =>
function (target) {
for (let property of Reflect.ownKeys(behaviour))
Object.defineProperty(target, property, { value: behaviour[property] })
return target;
}
将上面 mixin 的主体部分作为一种代码模板一遍遍写出来不但累人而且容易出错，而将其封装到函数里则是一种小进步。
mixin 的职责
和类一样，mixin 是元对象：它们给实例定义行为。除了以方法的形式定义对象的行为，类还负责初始化实例。有的时候，类和元对象还会具有其他的功能。
例如，有时某个概念涉及到一组人尽皆知的常量。如果使用类，那么将这些常量定义在 class 本身上则非常方便，这时 class 本身充当了命名空间的作用。
class Todo {
constructor (name) {
this.name = name || Todo.DEFAULT_NAME;
this.done = false;
}
do () {
this.done = true;
return this;
}
undo () {
this.done = false;
return this;
}
}
Todo.DEFAULT_NAME = 'Untitled';
// If we are sticklers for read-only constants, we could write:
// Object.defineProperty(Todo, 'DEFAULT_NAME', {value: 'Untitled'});
我们无法使用 “简单 mixin” 做同样的事，因为默认情况下，“简单 mixin” 的所有属性最终都被糅合到实例的 prototype 上。例如，我们想定义 Coloured.RED, Coloured.GREEN, Coloured.BLUE，但我们并不想在任何实例个体上定义 RED, GREEN, BLUE。
同样，我们可以借助函数式 mixin 来解决该问题。FunctionalMixin 工厂函数将接收一个可选的字典，该字典包含只读的 mixin 属性，该字典通过一个特殊的键给出：
const shared = Symbol("shared");
function FunctionalMixin (behaviour) {
const instanceKeys = Reflect.ownKeys(behaviour)
.filter(key => key !== shared);
const sharedBehaviour = behaviour[shared] || {};
const sharedKeys = Reflect.ownKeys(sharedBehaviour);
function mixin (target) {
for (let property of instanceKeys)
Object.defineProperty(target, property, { value: behaviour[property] });
return target;
}
for (let property of sharedKeys)
Object.defineProperty(mixin, property, {
value: sharedBehaviour[property],
enumerable: sharedBehaviour.propertyIsEnumerable(property)
});
return mixin;
}
FunctionalMixin.shared = shared;
现在我们便可以这样写：
const Coloured = FunctionalMixin({
setColourRGB ({r, g, b}) {
this.colourCode = {r, g, b};
return this;
},
getColourRGB () {
return this.colourCode;
},
[FunctionalMixin.shared]: {
RED: { r: 255, g: 0, b: 0 },
GREEN: { r: 0, g: 255, b: 0 },
BLUE: { r: 0, g: 0, b: 255 },
}
});
Coloured(Todo.prototype)
const urgent = new Todo("finish blog post");
urgent.setColourRGB(Coloured.RED);
urgent.getColourRGB()
//=> {"r":255,"g":0,"b":0}
mixin 本身的方法
JavaScript 中属性未必是值（和函数相对）。有时候，类也具有方法。同样，有时 mixin 具有自己的方法也是合理的，比如当涉及到 instanceof 时。
在 ECMAScript 的之前版本中，instanceof 操作符检查实例的 prototype 是否和构造函数的 prototype 相匹配。它和“类”配合使用没啥问题，但却无法直接和 mixin 协同工作。
urgent instanceof Todo
//=> true urgent instanceof Coloured
//=> false
这是 mixin 存在的问题。另外，程序员可能根据需要创建动态类型，或者直接使用 Object.create 和 Object.setPrototypeOf 管理原型，它们都可能导致 instanceof 工作不正常。ECMAScript 2015 提供了一种方式来覆写内置的 instanceof 的行为，即对象可以定义一个特殊的方法，该方法属性的名字是一个既定的符号——Symbol.hasInstance。
我们可以简单测试一下：
Object.defineProperty(Coloured, Symbol.hasInstance, {value: (instance) => true});
urgent instanceof Coloured
//=> true
{} instanceof Coloured
//=> true
当然，上面的例子在语义上是不对的。然而借助该技术，我们可以这样做：
const shared = Symbol("shared");
function FunctionalMixin (behaviour) {
const instanceKeys = Reflect.ownKeys(behaviour)
.filter(key => key !== shared);
const sharedBehaviour = behaviour[shared] || {};
const sharedKeys = Reflect.ownKeys(sharedBehaviour);
const typeTag = Symbol("isA");
function mixin (target) {
for (let property of instanceKeys)
Object.defineProperty(target, property, { value: behaviour[property] });
target[typeTag] = true;
return target;
}
for (let property of sharedKeys)
Object.defineProperty(mixin, property, {
value: sharedBehaviour[property],
enumerable: sharedBehaviour.propertyIsEnumerable(property)
});
Object.defineProperty(mixin, Symbol.hasInstance, {value: (instance) => !!instance[typeTag]});
return mixin;
}
FunctionalMixin.shared = shared;
urgent instanceof Coloured
//=> true
{} instanceof Coloured
//=> false
你需要为了照顾 instanceof 而专门做此实现吗？很可能不需要，因为自己实现一套多态机制是不得已而为之的做法。但这一点使得编写测试用例很顺手，并且一些激进的框架开发者可能在函数的多分派和模式匹配上求索，或许会用上这一点。
总结
对象 mixin 的迷人之处在于简单：它不需要在对象字面值和 Object.assign 之上做一层抽象。
然而，通过 mixin 模式定义的行为和通过 class 关键字定义的行为存在些许差异。体现差异的两个例子分别是可枚举性以及 mixin 自身的属性（如常量和类似于 [Symbol.hasInstance] 的 mixin 自身方法）。
函数式 mixin 使得实现上述功能成为可能，不过生成函数式 mixin 的 FunctionalMixin 函数引入了一定复杂性。
一般来说，最好保持同一个问题域下的代码表现尽可能相似，而这有时不可避免地增加基础代码的复杂性。但这一点更多的是一种指导思想，而非需要恪守的万能教条。出于此，对象 mixin 模式和函数式 mixin 在 JavaScript 中都有各自的一席之地。