破狼 Blog

Write less got more.

细说ES7 JavaScript Decorators

开篇概述

在上篇的ES7之Decorators实现AOP示例中,我们预先体验了ES7的Decorators,虽然它只是一个简单的日志AOP拦截Demo。但它也足以让我们体会到ES7 Decorators的强大魅力所在。所以为什么博主会为它而专门写作此文。在Angular2中的TypeScript Annotate就是标注装潢器的另一类实现。同样如果你也是一个React的爱好者,你应该已经发现了redux2中也开始利用ES7的Decorators进行了大量重构。

尝试过Python的同学们,我相信你做难忘的应该是装潢器。由Yehuda Katz提出的decorator模式,就是借鉴于Python的这一特性。作为读者的你,可以从上一篇博文ES7之Decorators实现AOP示例中看到它们之间的联系。

Decorators

背后原理

ES7的Decorators让我们能够在设计时对类、属性等进行标注和修改成为了可能。Decorators利用了ES5的

Object.defineProperty(target, name, descriptor);

来实现这一特性。如果你还不了解Object.defineProperty,请参见MDN文档。首先我们来考虑一个普通的ES6类:

class Person {
  name() { return `${this.first} ${this.last}` }
}

执行这一段class,给Person.prototype注册一个name属性,粗略的和如下代码相似:

Object.defineProperty(Person.prototype, 'name', {
  value: specifiedFunction,
  enumerable: false,
  configurable: true,
  writable: true
});

如果利用装潢器来标注一个属性呢?

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

在这种装潢下的属性,则会在利用Object.defineProperty为Person.prototype注册name属性之前,执行这段装潢器:

let descriptor = {
  value: specifiedFunction,
  enumerable: false,
  configurable: true,enumerable、
  writable: true
};

descriptor = readonly(Person.prototype, 'name', descriptor) || descriptor;
Object.defineProperty(Person.prototype, 'name', descriptor);

从上面的伪代码中,我们能看出,装潢器只是在Object.defineProperty为Person.prototype注册属性之前,执行一个装饰函数,其属于一类对Object.defineProperty的拦截。所以它和Object.defineProperty具有一致的方法签名,它们的3个参数分别为:

  1. obj:作用的目标对象;
  2. prop:作用的属性名;
  3. descriptor: 针对该属性的描述符。

这里最重要的是descriptor这个参数,它是一个数据或访问器的属性描述对象。在对数据和访问器属性描述时,它们都具有configurable、enumerable属性可用。而在数据描述时,value、writable属性则是数据所特有的。get、set属性则是访问器属性描述所特有的。属性描述器中的属性决定了对象prop属性的一些特性。比如 enumerable,它决定了目标对象是否可被枚举,能够在for…in循环中遍历到,或者出现在Object.keys法的返回值中;writable则决定了目标对象的属性是否可以被更改。完整的属性描述,请参见MDN文档

对于descriptor中的属性,它们可以被我们在Decorators中使用,或者修改的,以达到我们标注或者拦截的目的。这也是装潢器拦截的主体信息。

作用于访问器

装潢器也可以作用与属性的getter/setter访问器之上,如下将属性标注为不可枚举的代码:

class Person {
  @nonenumerable
  get kidCount() { return this.children.length; }
}

function nonenumerable(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}

下面是一个更复杂的对访问器的备用录模式运用:

class Person {
  @memoize
  get name() { return `${this.first} ${this.last}` }
  set name(val) {
    let [first, last] = val.split(' ');
    this.first = first;
    this.last = last;
  }
}

let memoized = new WeakMap();
function memoize(target, name, descriptor) {
  let getter = descriptor.get, setter = descriptor.set;

  descriptor.get = function() {
    let table = memoizationFor(this);
    if (name in table) { return table[name]; }
    return table[name] = getter.call(this);
  }

  descriptor.set = function(val) {
    let table = memoizationFor(this);
    setter.call(this, val);
    table[name] = val;
  }
}

function memoizationFor(obj) {
  let table = memoized.get(obj);
  if (!table) { table = Object.create(null); memoized.set(obj, table); }
  return table;
}   

作用域类上

同样Decorators也可以为class装潢,如下对类是否annotated的标注:

// A simple decorator
@annotation
class MyClass { }

function annotation(target) {
   // Add a property on target
   target.annotated = true;
}

也可以是一个工厂方法

对于装潢器来说,它同样也可以是一个工厂方法,接受配置参数信息,并返回一个应用于目标函数的装潢函数。如下例子,对类可测试性的标记:

@isTestable(true)
class MyClass { }

function isTestable(value) {
   return function decorator(target) {
      target.isTestable = value;
   }
}

同样工厂方法,也可以被应用于属性之上,如下对可枚举属性的配置:

class C {
  @enumerable(false)
  method() { }
}

function enumerable(value) {
  return function (target, key, descriptor) {
     descriptor.enumerable = value;
     return descriptor;
  }
}

同样在上篇ES7之Decorators实现AOP示例中对于日志拦截的日志类型配置信息,也是利用工厂方法来实现的。它是一个更复杂的工厂方式的Decorators实现。

后续

如上一篇博问所说:虽然它是ES7的特性,但在Babel大势流行的今天,我们可以利用Babel来使用它。我们可以利用Babel命令行工具,或者grunt、gulp、webpack的babel插件来使用Decorators。

关于ES7 Decorators的更有意思的玩法,你可以参见牛人实现的常用的Decorators:core-decorators。以及raganwald如何用Decorators来实现Mixin

Comments