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);
  // =>
    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 中都有各自的一席之地