ES2015 中的函数式Mixin

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

?xml version="1.0" encoding="UTF-8"?

原文链接：http://raganwald.com/2015/06/17/functional-mixins.html

在“原型即对象”中，我们看到可以对原型使用 Object.assign 来模拟 mixin，原型是 JavaScript 中类概念的基石。现在我们将回顾这个概念，并进一步探究如何将功能糅合进类。

?xml version="1.0" encoding="UTF-8"? 首先，简单回顾一下：在 JavaScript 中，类是通过一个构造函数和它的原型来定义的，无论你是用 ES5 语法，还是使用 class 关键字。类的实例是通过 new 调用构造器的方式创建的。实例从构造器的 prototype 属性上继承共享的方法。

对象 mixin 模式

如果多个类共享某些行为，或者希望对庞杂的原型对象进行功能提取，这时候就可以使用 mixin 来对原型进行扩展。

?xml version="1.0" encoding="UTF-8"? 如这里的 Todo 类

class Todo {

  constructor (name) {

    this.name = name || 'Untitled';

    this.done = false;

  }

  do () {

    this.done = true;

    return this;

  }

  undo () {

    this.done = false;

    return this;

  }

}

?xml version="1.0" encoding="UTF-8"?

用于颜色编码的 mixin 如下：

const Coloured = {

  setColourRGB ({r, g, b}) {

    this.colourCode = {r, g, b};

    return this;

  },

  getColourRGB () {

    return this.colourCode;

  }

};

?xml version="1.0" encoding="UTF-8"?

将颜色编码功能糅合到 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}}

?xml version="1.0" encoding="UTF-8"?

我们还可以升级为使用私有属性：

const colourCode = Symbol("colourCode");

const Coloured = {

  setColourRGB ({r, g, b}) {

    this[colourCode]= {r, g, b};

    return this;

  },

  getColourRGB () {

    return this[colourCode];

  }

};

?xml version="1.0" encoding="UTF-8"?

至此，非常简单明了。我们将这称为一种 “模式”，像菜谱一样，是解决某种问题的独特的代码组织方式。

函数式 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);

?xml version="1.0" encoding="UTF-8"?

我们可以定义一个工厂函数，并从命名上体现该模式：

const FunctionalMixin = (behaviour) =>

  target => Object.assign(target, behaviour);

?xml version="1.0" encoding="UTF-8"?

现在我们可以精要地定义函数式 mixin:

const Coloured = FunctionalMixin({

  setColourRGB ({r, g, b}) {

    this.colourCode = {r, g, b};

    return this;

  },

  getColourRGB () {

    return this.colourCode;

  }

});

?xml version="1.0" encoding="UTF-8"?

可枚举性

如果我们探究 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

?xml version="1.0" encoding="UTF-8"?

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

  }

?xml version="1.0" encoding="UTF-8"?

将上面 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'});

?xml version="1.0" encoding="UTF-8"?

我们无法使用 “简单 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;

?xml version="1.0" encoding="UTF-8"?

现在我们便可以这样写：

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}

?xml version="1.0" encoding="UTF-8"?

mixin 本身的方法

JavaScript 中属性未必是值（和函数相对）。有时候，类也具有方法。同样，有时 mixin 具有自己的方法也是合理的，比如当涉及到 instanceof 时。

在 ECMAScript 的之前版本中，instanceof 操作符检查实例的 prototype 是否和构造函数的 prototype 相匹配。它和“类”配合使用没啥问题，但却无法直接和 mixin 协同工作。

urgent instanceof Todo

  //=> true

urgent instanceof Coloured

  //=> false

?xml version="1.0" encoding="UTF-8"?

这是 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

?xml version="1.0" encoding="UTF-8"?

当然，上面的例子在语义上是不对的。然而借助该技术，我们可以这样做：

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