导读

本文主要为三方面的内容：

  1. 装饰者模式的概念和使用
  2. Typescript装饰器的使用、执行顺序
  3. 编译后的源码分析

学习的目的是对装饰者模式模式有进一步的理解，并运用在自己的项目中；对TypeScript装饰器的理解，更好的使用装饰器，例如在 nodejs web 框架中、 vue-property-decorator 中，或者是自定义装饰器，能熟练运用并掌握其基本的实现原理。

装饰者模式介绍

装饰者模式（Decorator Pattern）也称为装饰器模式，在不改变对象自身的基础上，动态增加额外的职责。属于结构型模式的一种。

使用装饰者模式的优点：把对象核心职责和要装饰的功能分开了。非侵入式的行为修改。

举个例子来说，原本长相一般的女孩，借助美颜功能，也能拍出逆天的颜值。只要善于运用辅助的装饰功能，开启瘦脸，增大眼睛，来点磨皮后，咔嚓一拍，惊艳无比。

经过这一系列叠加的装饰，你还是你，长相不增不减，却能在镜头前增加了多重美。如果你愿意，还可以尝试不同的装饰风格，只要装饰功能做的好，你就能成为“百变星君”。

可以用代码表示，把每个功能抽象成一个类：

  1. // 女孩子
  2. class Girl {
  3.   faceValue() {
  4.     console.log('我原本的脸')
  5.   }
  6. }
  8. class ThinFace  {
  9.   constructor(girl) {
  10.     this.girl = girl;
  11.   }
  12.   faceValue() {
  13.     this.girl.faceValue();
  14.     console.log('开启瘦脸')
  15.   }
  16. }
  18. class IncreasingEyes  {
  19.   constructor(girl) {
  20.     this.girl = girl;
  21.   }
  22.   faceValue() {
  23.     this.girl.faceValue();
  24.     console.log('增大眼睛')
  25.   }
  26. }
  28. let girl = new Girl();
  29. girl = new ThinFace(girl);
  30. girl = new IncreasingEyes(girl);
  32. // 闪瞎你的眼
  33. girl.faceValue(); //

从代码的表现来看，将一个对象嵌入到另一个对象中，相当于通过一个对象对另一个对象进行包装，形成一条包装链。调用后，随着包装的链条传递给每一个对象，让每个对象都有处理的机会。

这种方式在增加删除装饰功能上都有极大的灵活性，假如你有勇气展示真实的脸，去掉瘦脸的包装即可，这对其他功能毫无影响；假如要增加磨皮，再来个功能类，继续装饰下去，对其他功能也无影响，可以并存运行。

在 javascript 中增加小功能使用类，显的有点笨重，JavaScript 的优点是灵活，可以使用对象来表示：

  1. let girl = {
  2.   faceValue() {
  3.     console.log('我原本的脸')
  4.   }
  5. }
  6. function thinFace() {
  7.   console.log('开启瘦脸')
  8. }
  9. function IncreasingEyes() {
  10.   console.log('增大眼睛')
  11. }
  13. girl.faceValue = function(){
  14.   const originalFaveValue = girl.faceValue;  // 原来的功能
  15.   return function() {
  16.     originalFaveValue.call(girl);
  17.     thinFace.call(girl);
  18.   }
  19. }()
  20. girl.faceValue = function(){
  21.   const originalFaveValue = girl.faceValue;  // 原来的功能
  22.   return function() {
  23.     originalFaveValue.call(girl);
  24.     IncreasingEyes.call(girl);
  25.   }
  26. }()
  28. girl.faceValue();

在不改变原来代码的基础上，通过先保留原来函数，重新改写，在重写的代码中调用原来保留的函数。

用一张图来表示装饰者模式的原理：

装饰者模式和TypeScript装饰器 - 图1

从图中可以看出来，通过一层层的包装，增加了原先对象的功能。

TypeScript中的装饰器

TypeScript 中的装饰器使用 @expression 这种形式，expression 求值后为一个函数， 它在运行时被调用，被装饰的声明信息会被做为参数传入。

Javascript规范里的装饰器目前处在 建议征集的第二阶段，也就意味着不能在原生代码中直接使用，浏览器暂不支持。

可以通过 babel 或 TypeScript 工具在编译阶段，把装饰器语法转换成浏览器可执行的代码。（最后会有编译后的源码分析）

以下主要讨论 TypeScript 中装饰器的使用。

TypeScript 中的装饰器可以被附加到类声明、方法、 访问符(getter/setter)、属性和参数上。

开启对装饰器的支持，命令行 编译文件时：

  1. tsc --target ES5 --experimentalDecorators test.ts

配置文件 tsconfig.json

  1. {
  2.     "compilerOptions": {
  3.         "target": "ES5",
  4.         "experimentalDecorators": true
  5.     }
  6. }

装饰器的使用

装饰器实际上就是一个函数，在使用时前面加上 @ 符号，写在要装饰的声明之前，多个装饰器同时作用在一个声明时，可以写一行或换行写：

  1. // 换行写
  2. @test1
  3. @test2
  4. declaration
  6. //写一行
  7. @test1 @test2 ...
  8. declaration

定义 face.ts 文件：

  1. function thinFace() {
  2.   console.log('开启瘦脸')
  3. }
  5. @thinFace
  6. class Girl {
  7. }

编译成 js 代码，在运行时，会直接调用 thinFace 函数。这个装饰器作用在类上，称之为类装饰器。

如果需要附加多个功能，可以组合多个装饰器一起使用：

  1. function thinFace() {
  2.   console.log('开启瘦脸')
  3. }
  4. function IncreasingEyes() {
  5.   console.log('增大眼睛')
  6. }
  8. @thinFace
  9. @IncreasingEyes
  10. class Girl {
  11. }

多个装饰器组合在一起，在运行时，要注意，调用顺序是 从下至上 依次调用，正好和书写的顺序相反。例子中给出的运行结果是：

  1. '增大眼睛'
  2. '开启瘦脸'

如果你要在一个装饰器中给类添加属性，在其他的装饰器中使用，那就要写在最后一个装饰器中，因为最后写的装饰器最先调用。

装饰器工厂

有时需要给装饰器传递一些参数，这要借助于装饰器工厂函数。装饰器工厂函数实际上就是一个高阶函数，在调用后返回一个函数，返回的函数作为装饰器函数。

  1. function thinFace(value: string){
  2.   console.log('1-瘦脸工厂方法')
  3.   return function(){
  4.     console.log(`4-我是瘦脸的装饰器，要瘦脸${value}`)
  5.   }
  6. }
  7. function IncreasingEyes(value: string) {
  8.   console.log('2-增大眼睛工厂方法')
  9.   return function(){
  10.     console.log(`3-我是增大眼睛的装饰器，要${value}`)
  11.   }
  12. }
  14. @thinFace('50%')
  15. @IncreasingEyes('增大一倍')
  16. class Girl {
  17. }

@ 符号后为调用工厂函数，依次从上到下执行，目的是求得装饰器函数。装饰器函数的运行顺序依然是从下到上依次执行。

运行的结果为：

  1. 1-瘦脸工厂方法
  2. 2-增大眼睛工厂方法
  3. 3-我是增大眼睛的装饰器，要增大一倍
  4. 4-我是瘦脸的装饰器，要瘦脸50%

总结一下：

  1. 写了工厂函数，从上到下依次执行，求得装饰器函数。
  2. 装饰器函数的执行顺序是 从下到上 依次执行。

类装饰器

作用在类声明上的装饰器，可以给我们改变类的机会。在执行装饰器函数时，会把类构造函数传递给装饰器函数。

  1. function classDecorator(value: string){
  2.   return function(constructor){
  3.     console.log('接收一个构造函数')
  4.   }
  5. }
  7. function thinFace(constructor){
  8.   constructor.prototype.thinFaceFeature = function() {
  9.     console.log('瘦脸功能')
  10.   }
  11. }
  13. @thinFace
  14. @classDecorator('类装饰器')
  15. class Girl {}
  17. let g = new Girl();
  19. g.thinFaceFeature(); // '瘦脸功能'

上面的例子中，拿到传递构造函数后，就可以给构造函数原型上增加新的方法，甚至也可以继承别的类。

方法装饰器

作用在类的方法上，有静态方法和原型方法。作用在静态方法上，装饰器函数接收的是类构造函数；作用在原型方法上，装饰器函数接收的是原型对象。
这里拿作用在原型方法上举例。

  1. function methodDecorator(value: string, Girl){
  2.   return function(prototype, key, descriptor){
  3.     console.log('接收原型对象，装饰的属性名，属性描述符', Girl.prototype === prototype)
  4.   }
  5. }
  7. function thinFace(prototype, key, descriptor){
  8.   // 保留原来的方法逻辑
  9.   let originalMethod = descriptor.value;
  10.   // 改写，增加逻辑，并执行原有逻辑
  11.   descriptor.value = function(){
  12.     originalMethod.call(this);  // 注意修改this的指向
  13.     console.log('开启瘦脸模式')
  14.   }
  15. }
  17. class Girl {
  18.   @thinFace
  19.   @methodDecorator('方式装饰器', Girl)
  20.   faceValue(){
  21.     console.log('我是原本的面目')
  22.   }
  23. }
  25. let g = new Girl();
  26. g.faceValue();

从代码中可以看出，装饰器函数接收三个参数，原型对象、方法名、描述对象。对描述对象陌生的，可以参考 这里;

要增强功能，可以先保留原来的函数，改写描述对象的 value 为另一函数。

当使用 g.faceValue() 访问方法时，访问的就是描述对象 value 对应的值。

在改写的函数中增加逻辑，并执行原来保留的原函数。注意原函数要用 call 或 apply 将 this 指向原型对象。

属性装饰器

作用在类中定义的属性上，这些属性不是原型上的属性，而是通过类实例化得到的实例对象上的属性。

装饰器同样会接受两个参数，原型对象，和属性名。而没有属性描述对象，为什么呢？这与TypeScript是如何初始化属性装饰器的有关。 目前没有办法在定义一个原型对象的成员时描述一个实例属性。

  1. function propertyDecorator(value: string, Girl){
  2.   return function(prototype, key){
  3.     console.log('接收原型对象，装饰的属性名，属性描述符', Girl.prototype === prototype)
  4.   }
  5. }
  7. function thinFace(prototype, key){
  8.   console.log(prototype, key)
  9. }
  11. class Girl {
  12.   @thinFace
  13.   @propertyDecorator('属性装饰器', Girl)
  14.   public age: number = 18;
  15. }
  17. let g = new Girl();
  18. console.log(g.age); // 18

其他装饰器的写法

下面组合多个装饰器写在一起，出了上面提到的三种，还有 访问符装饰器、参数装饰器。这些装饰器在一起时，会有执行顺序。

  1. function classDecorator(value: string){
  2.   console.log(value)
  3.   return function(){}
  4. }
  5. function propertyDecorator(value: string) {
  6.   console.log(value)
  7.   return function(){
  8.     console.log('propertyDecorator')
  9.   }
  10. }
  11. function methodDecorator(value: string) {
  12.   console.log(value)
  13.   return function(){
  14.     console.log('methodDecorator')
  15.   }
  16. }
  17. function paramDecorator(value: string) {
  18.   console.log(value)
  19.   return function(){
  20.     console.log('paramDecorator')
  21.   }
  22. }
  23. function AccessDecorator(value: string) {
  24.   console.log(value)
  25.   return function(){
  26.     console.log('AccessDecorator')
  27.   }
  28. }
  29. function thinFace(){
  30.   console.log('瘦脸')
  31. }
  32. function IncreasingEyes() {
  33.   console.log('增大眼睛')
  34. }
  36. @thinFace
  37. @classDecorator('类装饰器')
  38. class Girl {
  39.   @propertyDecorator('属性装饰器')
  40.   age: number = 18;
  42.   @AccessDecorator('访问符装饰器')
  43.   get city(){}
  45.   @methodDecorator('方法装饰器')
  46.   @IncreasingEyes
  47.   faceValue(){
  48.     console.log('原本的脸')
  49.   }
  51.   getAge(@paramDecorator('参数装饰器') name: string){}
  52. }

运行了这段编译后的代码，会发现这些访问器的顺序是，属性装饰器 -> 访问符装饰器 -> 方法装饰器 -> 参数装饰器 -> 类装饰器。

更详细的用法可以参考官网文档：https://www.tslang.cn/docs/handbook/decorators.html#decorator-factories

装饰器运行时代码分析

装饰器在浏览器中不支持，没办法直接使用，需要经过工具编译成浏览器可执行的代码。

分析一下通过工具编译后的代码。

生成 face.js 文件：

  1. tsc --target ES5 --experimentalDecorators  face.ts

打开 face.js 文件，会看到一段被压缩后的代码，可以格式化一下。

先看这段代码：

  1. __decorate([
  2.     propertyDecorator('属性装饰器')
  3. ], Girl.prototype, "age", void 0);
  4. __decorate([
  5.     AccessDecorator('访问符装饰器')
  6. ], Girl.prototype, "city", null);
  7. __decorate([
  8.     methodDecorator('方法装饰器'),
  9.     IncreasingEyes
  10. ], Girl.prototype, "faceValue", null);
  11. __decorate([
  12.     __param(0, paramDecorator('参数装饰器'))
  13. ], Girl.prototype, "getAge", null);
  14. Girl = __decorate([
  15.     thinFace,
  16.     classDecorator('类装饰器')
  17. ], Girl);

__decorate 的作用就是执行装饰器函数，从这段代码中能够看出很多信息，印证上面得到的结论。

通过__decorate调用顺序，可以看出来，多个类型的装饰器一起使用时，顺序是，属性装饰器 -> 访问符装饰器 -> 方法装饰器 -> 参数装饰器 -> 类装饰器。

调用了 __decorate 函数，根据使用的装饰器类型不同，传入的参数也不相同。

第一个参数传入的都一样，为数组，这样确保和我们书写的顺序一致，每一项是求值后的装饰器函数，如果写的是 @propertyDecorator() 则一上来就执行，得到装饰器函数，这跟上面分析的一致。

类装饰器会把类作为第二个参数，其他的装饰器，把原型对象作为第二个参数，属性名作为第三个，第四个是 null 或 void 0。void 0的值为undefined，也就等于没传参数

要记住传给 decorate 函数参数的个数和值，在深入到 decorate 源码中， 会根据这些值来决定执行装饰器函数时，传入参数的多少。

好，来看 __decorate 函数实现：

  1. // 已存在此函数，直接使用，否则自己定义
  2. var __decorate = (this && this.__decorate) ||
  3. // 接收四个参数： 
  4. //decorators存放装饰器函数的数组、target原型对象|类，
  5. //key属性名、desc描述（undefined或null）
  6. function(decorators, target, key, desc) {
  7.   var c = arguments.length,
  8.   // 拿到参数的个数
  9.   r = c < 3 // 参数小于三个，说明是类装饰器，直接拿到类
  10.     ? target
  11.     : desc === null // 第四个参数为 null，则需要描述对象；属性装饰器传入是  void 0，没有描述对象。
  12.         ? desc = Object.getOwnPropertyDescriptor(target, key) 
  13.         : desc,
  14.   d;
  15.   // 如果提供了Reflect.decorate方法，直接调用；否则自己实现
  16.   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") 
  17.     r = Reflect.decorate(decorators, target, key, desc);
  18.   else 
  19.     // 装饰器函数执行顺序和书写的顺序相反，从下至上 执行
  20.     for (var i = decorators.length - 1; i >= 0; i--) 
  21.       if (d = decorators[i]) // 拿到装饰器函数
  22.           r = (c < 3 // 参数小于3个，说明是类装饰器，执行装饰器函数，直接传入类
  23.             ? d(r) 
  24.             : c > 3 // 参数大于三个，是方法装饰器、访问符装饰器、参数装饰器，则执行传入描述对象
  25.               ? d(target, key, r) 
  26.               : d(target, key) // 为属性装饰器，不传入描述对象
  27.             ) || r;
  29.   // 给被装饰的属性，设置得到的描述对象，主要是针对，方法、属性来说的
  30.   /*** 
  31.      * r 的值分两种情况，
  32.      *  一种是通过上面的 Object.getOwnPropertyDescriptor 得到的值
  33.      *  另一种，是装饰器函数执行后的返回值，作为描述对象。
  34.      *      一般不给装饰器函数返回值。
  35.     */
  36.   return c > 3 && r && Object.defineProperty(target, key, r),r;
  37. };

上面的参数装饰器，调用了一个函数为 __params，

  1. var __param = (this && this.__param) || function (paramIndex, decorator) {
  2.     return function (target, key) { decorator(target, key, paramIndex); }
  3. };

目的是，要给装饰器函数传入参数的位置 paramIndex。

看了编译后的源码，相信会对装饰器的理解更深刻。

以上如有偏差欢迎指正学习，谢谢。~~~~

如果对你有帮助，请关注【前端技能解锁】：

装饰者模式和TypeScript装饰器 - 图2