JavaScript装饰器

一、装饰器简介

注：官方ES6入门叫修饰器，本文以装饰器赘述。
通常在 Java 项⽬中⻅到如下图所示的代码，下图中涉及“@PostMapping”和“@ResponseBody” 在Java中通常解释为”注解“。通过这种编程⽅式，可以很⽅便地将⼀些逻辑封装起来，如：
Controller 的请求⽅法（get、post 等）和路由，参数的序列化等等。
如果不使⽤注解，那么上述这些逻辑就需要开发者⾃⼰去实现了。

装饰器是一种用于修改类的语法，它可以在不修改原始代码的情况下增强其功能。
装饰器可以实现AOP（面向切面编程）的功能
可见装饰器存在以下优点：

• 减少冗余代码
• 提高代码扩展性

二、JavaScript中的装饰器

2.1 装饰器演练

2.1.1 装饰器浏览器环境下如何运行

由于@ 符号后面的标识符被解析为一个装饰器。然而，装饰器目前还是处于实验阶段，不在所有的 JavaScript 环境中都被支持，此时需要babel转换。

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

创建一个.babelrc文件

{
    "presets": ["@babel/preset-env"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }

运行下列指令打包输出转义后的代码，在html文件中引入

npx babel test.js --out-file dist.js

2.1.2 简单演示

@test
class TestClass {
  constructor() {
    console.log('test ok')
  }
}

function test(t) {
  t.isTest = true
}
console.log(TestClass.isTest) // true

此时按照上述引入后，可以直接打印出结果。
上述代码中’@test’ 就是一个装饰器，修改testClass类，在它上添加了静态属性test。
因此装饰器基本行为如下：

@decorator
class A {} 
-------------------
// 等同于
class A {} 
A = decorator(A) || A

装饰器也可以接受参数（在包装一层函数）或者在原型对象上操作

@test(1)
class TestClass {
  constructor() {}
}

@test('加参数ok')
class BooClass {
  constructor() {}
}


function test(t) {
  return function(target) {
     target.isTest = t
  }
}
console.log(TestClass.isTest) // true
console.log(BooClass.isTest) // true

@test(1)
class TestClass {
  constructor() {}
}

function test(t) {
  return function(target) {
     target.prototype.isTest = t
  }
}
let a = new TestClass()
console.log(a.isTest) // 1

2.2 装饰器使用场景

2.2.1 类场景使用

1）类方法装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
• 成员的名字
• 成员的描述对象

注：属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。

function readonly(target, name, descriptor) {
  // descriptor值类似Object.prototype原型
  // {
  //     value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // }
  descriptor.writable = false;
  return descriptor;
}
class Person {
  @readonly
  name() {
      console.log("~~~");
  }
}
const p = new Person();
p.name() // ~~~
p.name = () => {
  console.log('111')
} // dist.js:43 Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Person>'

将当前类设置为只读，等同于Object.defineProperty使用。类似包含可枚举，冻结等

2）类属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
• 成员的名字

注：属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关

class MyTestableClass {
  @testable
  name;
  constructor(name) {
      this.name = name;
  }
}

function testable(target, name) {
  console.log(arguments)
}

3）复合装饰器

注：一个方法有多个修饰器，该方法会先从外到内进入修饰器，接着由内向外执行。【有点类似栈，先进后出】

function dec(id) {
  console.log('进入前:',id)
  // 若不写这段，会报错
  // Uncaught TypeError: decorator is not a function
  return (target, property, descriptor) => {
    console.log('进入后:', id)
  }
}

class Example {
  @dec(1)
  @dec(2)
  method() {}
}

// 进入前: 1
// 进入前: 2
// 进入后: 2
// 进入后: 1

2.2.3 无法用于函数

无法用于函数，是因为函数存在函数提升

let count = 0
const add = () => {
  count++
}

@add
const foo = () => {}
console.log(foo.add())

实际操作时，发现babel转义或者vscode强限制住装饰器只能支持

2.3 应用场景

关于装饰器可以便于我们封装一些工具场景，比如埋点、日志、发布等自动化场景。