装饰器与元数据反射（1）方法装饰器

摘要：使用装饰器的方法很简单在装饰器名前加字符，写在想要装饰的方法上，类似写注释的方式装饰器实际上是一个函数，入参为所装饰的方法，返回值为装饰后的方法。经过装饰过的方法，它依然按照原来的方式执行，只是额外执行了附件的装饰器函数的功能。

让我来深入地了解一下TypeScript对于装饰器模式的实现，以及反射与依赖注入等相关特性。

在Typescript的源代码中，可以看到装饰器能用来修饰class,property,method,parameter：

</>复制代码 
declare type ClassDecorator = (target: TFunction) => TFunction | void;
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
declare type MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor) => TypedPropertyDescriptor | void;
declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

接下来深入地了解一下每种装饰器：

首先来根据上面的标识，实现一个名为log的方法装饰器。使用装饰器的方法很简单：在装饰器名前加@字符，写在想要装饰的方法上，类似写注释的方式：

</>复制代码 
class C {
    @log
    foo(n: number) {
        return n * 2;
    }
}

装饰器实际上是一个函数，入参为所装饰的方法，返回值为装饰后的方法。在使用之前需要提前实现这个装饰器函数，如下：

</>复制代码 
function log(target: Function, key: string, descriptor: any) {
    // target === C.prototype
    // key === "foo"
    // descriptor === Object.getOwnPropertyDescriptor(C.prototype, "foo")
    // 保存对原方法的引用，避免重写
    var originalMethod = descriptor.value; 
    descriptor.value =  function (...args: any[]) {
        // 将“foo”函数的参数列表转化为字符串
        var a = args.map(a => JSON.stringify(a)).join();
        // 调用 foo() 并获取它的返回值
        var result = originalMethod.apply(this, args);
        // 将返回的结果转成字符串
        var r = JSON.stringify(result);
        // 打印日志
        console.log(`Call: ${key}(${a}) => ${r}`);
        // 返回调用 foo 的结果
        return result;
    }
    // 返回已编辑的描述符
    return descriptor;
}

该装饰器函数包含三个参数：

target：所要修饰的方法。

key：被修饰方法的名字。

descriptor：属性描述符，如果为给定可以通过调用Object.getOwnPropertyDescriptor()来获取。

我们观察到，类C中使用的装饰器函数log并没有显式的参数传递，不免好奇它所需要的参数是如何传递的？以及该函数是如何被调用的？

TypeScript最终还是会被编译为JavaScript执行，为了搞清上面的问题，我们来看一下TypeScript编译器将类C的定义最终生成的JavaScript代码：

</>复制代码 
var C = (function () {
    function C() {
    }
    C.prototype.foo = function (n) {
        return n * 2;
    };
    Object.defineProperty(C.prototype, "foo",
        __decorate([
            log
        ], C.prototype, "foo", Object.getOwnPropertyDescriptor(C.prototype, "foo")));
    return C;
})();

而为添加装饰器所生成的JavaScript代码如下：

</>复制代码 
var C = (function () {
    function C() {
    }
    C.prototype.foo = function (n) {
        return n * 2;
    };
    return C;
})();

对比两者发现使用装饰的不同，只是在类定义中，多了如下代码：

</>复制代码 
Object.defineProperty(
  __decorate(
    [log],                                              // 装饰器
    C.prototype,                                        // target：C的原型
    "foo",                                              // key：装饰器修饰的方法名
    Object.getOwnPropertyDescriptor(C.prototype, "foo") // descriptor
  );
);

通过查询MDN文档，可以知悉defineProperty的作用：

</>复制代码 
Object.defineProperty()方法可直接在一个对象上定义一个新的属性，或者修改对象上一个已有的属性，然后返回这个对象。

TypeScript编译器通过defineProperty方法重写了所修饰的方法foo，新方法的实现是由函数__decorate返回的，那么问题来了：__decorate函数在哪声明的呢？

掘地三尺不难找到，来一起把玩一下：

</>复制代码 
var __decorate = this.__decorate || function (decorators, target, key, desc) {
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") {
    return Reflect.decorate(decorators, target, key, desc);
  }
  switch (arguments.length) {
    case 2: 
      return decorators.reduceRight(function(o, d) { 
        return (d && d(o)) || o; 
      }, target);
    case 3: 
      return decorators.reduceRight(function(o, d) { 
        return (d && d(target, key)), void 0; 
      }, void 0);
    case 4: 
      return decorators.reduceRight(function(o, d) { 
        return (d && d(target, key, o)) || o; 
      }, desc);
  }
};

第一行使用了或操作符（||），以确保如果函数__decorate已被创建，他将不会被重写。

</>复制代码 
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")

第二行是一个条件语句，使用了JavaScript的一个新特性：元数据反射。这个主题后续再展开讲述，下面我们先聚焦观察下该新特性的兼容方案：

</>复制代码 
switch (arguments.length) { 
  case 2: 
    return decorators.reduceRight(function(o, d) { 
      return (d && d(o)) || o; 
    }, target);
  case 3: 
    return decorators.reduceRight(function(o, d) { 
      return (d && d(target, key)), void 0; 
    }, void 0);
  case 4: 
    return decorators.reduceRight(function(o, d) { 
      return (d && d(target, key, o)) || o; 
    }, desc);
}

此处__decorate函数接受了4个参数，所以case 4将被执行。平心而论这块代码有点生涩，没关系掰开揉碎了看。

</>复制代码 
reduceRight方法接受一个函数作为累加器和数组的每个值（从右到左）将其减少为单个值。

为了方便理解，上面的代码重写如下：

</>复制代码 
[log].reduceRight(function(log, desc) { 
  if(log) {
    return log(C.prototype, "foo", desc);
  }
  else {
    return desc;
  }
}, Object.getOwnPropertyDescriptor(C.prototype, "foo"));

可以看到当这段代码执行的时候，装饰器函数log被调用，并且参数C.prototype，"foo"，previousValue也被传入，如此之前的问题现在可以解答了。
经过装饰过的foo方法，它依然按照原来的方式执行，只是额外执行了附件的装饰器函数log的功能。

</>复制代码 
const c = new C();
const r = c.foo(23); //  "Call: foo(23) => 46"
console.log(r);    // 46