让我来深入地了解一下TypeScript对于装饰器模式的实现，以及反射与依赖注入等相关特性。在Typescript的源代码中，可以看到装饰器能用来修饰class,property,method,parameter：declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | 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
...