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