一、装饰器简介
注：官方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 应用场景
关于装饰器可以便于我们封装一些工具场景，比如埋点、日志、发布等自动化场景。
