ES2015 中的函数式Mixin

原文链接：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);// =>
    namedonecolourCodesetColourRGBgetColourRGB

正如所见，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