摘要：使用裝飾器的方法很簡單在裝飾器名前加字符，寫在想要裝飾的方法上，類似寫注釋的方式裝飾器實際上是一個函數(shù)，入?yún)樗b飾的方法，返回值為裝飾后的方法。經(jīng)過裝飾過的方法，它依然按照原來的方式執(zhí)行，只是額外執(zhí)行了附件的裝飾器函數(shù)的功能。

讓我來深入地了解一下TypeScript對于裝飾器模式的實現(xiàn)，以及反射與依賴注入等相關特性。

在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;

接下來深入地了解一下每種裝飾器：

首先來根據(jù)上面的標識，實現(xiàn)一個名為log的方法裝飾器。使用裝飾器的方法很簡單：在裝飾器名前加@字符，寫在想要裝飾的方法上，類似寫注釋的方式：

class C {
    @log
    foo(n: number) {
        return n * 2;
    }
}

裝飾器實際上是一個函數(shù)，入?yún)樗b飾的方法，返回值為裝飾后的方法。在使用之前需要提前實現(xiàn)這個裝飾器函數(shù)，如下：

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”函數(shù)的參數(shù)列表轉化為字符串
        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;
}

該裝飾器函數(shù)包含三個參數(shù)：

target：所要修飾的方法。

key：被修飾方法的名字。

descriptor：屬性描述符，如果為給定可以通過調用Object.getOwnPropertyDescriptor()來獲取。

我們觀察到，類C中使用的裝飾器函數(shù)log并沒有顯式的參數(shù)傳遞，不免好奇它所需要的參數(shù)是如何傳遞的？以及該函數(shù)是如何被調用的？

TypeScript最終還是會被編譯為JavaScript執(zhí)行，為了搞清上面的問題，我們來看一下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;
})();

對比兩者發(fā)現(xiàn)使用裝飾的不同，只是在類定義中，多了如下代碼：

Object.defineProperty(
  __decorate(
    [log],                                              // 裝飾器
    C.prototype,                                        // target：C的原型
    "foo",                                              // key：裝飾器修飾的方法名
    Object.getOwnPropertyDescriptor(C.prototype, "foo") // descriptor
  );
);

通過查詢MDN文檔，可以知悉defineProperty的作用：

Object.defineProperty()方法可直接在一個對象上定義一個新的屬性，或者修改對象上一個已有的屬性，然后返回這個對象。

TypeScript編譯器通過defineProperty方法重寫了所修飾的方法foo，新方法的實現(xiàn)是由函數(shù)__decorate返回的，那么問題來了：__decorate函數(shù)在哪聲明的呢？

掘地三尺不難找到，來一起把玩一下：

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);
  }
};

第一行使用了或操作符（||），以確保如果函數(shù)__decorate已被創(chuàng)建，他將不會被重寫。

if (typeof Reflect === "object" && typeof Reflect.decorate === "function")

第二行是一個條件語句，使用了JavaScript的一個新特性：元數(shù)據(jù)反射。這個主題后續(xù)再展開講述，下面我們先聚焦觀察下該新特性的兼容方案：

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函數(shù)接受了4個參數(shù)，所以case 4將被執(zhí)行。平心而論這塊代碼有點生澀，沒關系掰開揉碎了看。

reduceRight方法接受一個函數(shù)作為累加器和數(shù)組的每個值（從右到左）將其減少為單個值。

為了方便理解，上面的代碼重寫如下：

[log].reduceRight(function(log, desc) { 
  if(log) {
    return log(C.prototype, "foo", desc);
  }
  else {
    return desc;
  }
}, Object.getOwnPropertyDescriptor(C.prototype, "foo"));

可以看到當這段代碼執(zhí)行的時候，裝飾器函數(shù)log被調用，并且參數(shù)C.prototype，"foo"，previousValue也被傳入，如此之前的問題現(xiàn)在可以解答了。
經(jīng)過裝飾過的foo方法，它依然按照原來的方式執(zhí)行，只是額外執(zhí)行了附件的裝飾器函數(shù)log的功能。

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