一、装饰器(Decorator)
- 装饰器：就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
- 常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
- 装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）
- 装饰器是过去几年中js最大的成就之一，已是Es7的标准特性之一
二、类装饰器（无法参数）
类装饰器在类声明之前被声明（紧靠着类声明）。
类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数
function fun( target:any ){
target.prototype.userName = '李四';
}
@fun
class Person{
}
let person = new Person();
//@ts-ignore
console.log( person.userName );
三、装饰器工厂（可传参）
function fun1( options:any ){
return ( target:any )=>{
target.userName = options.name;
target.prototype.age = options.age;
}
}
@fun1({
name:'李四',
age:18
})
class Obj1{
}
let obj1 = new Obj1();
//@ts-ignore
console.log( Obj1.userName, obj1.name , obj1.age );
四、装饰器组合
结合起来一起使用的时候, 会先 从上至下 的执行所有的装饰器工厂, 拿到所有真正的装饰器, 然后再 从下至上 的执行所有的装饰器：
function demo1( target:any ){
console.log('demo1')
}
function demo2( ){
console.log('demo2')
return ( target:any )=>{
console.log('demo2里面')
}
}
function demo3( ){
console.log('demo3')
return ( target:any )=>{
console.log('demo3里面')
}
}
function demo4( target:any ){
console.log('demo4')
}
@demo1
@demo2()
@demo3()
@demo4
class Person{
}
/*结果是：
demo2
demo3
demo4
demo3里面
demo2里面
demo1
*/
五、属性装饰器
function fun3( arg:any ){
return ( target:any , attr:any )=>{
target[attr] = arg;
}
}
class Obj3{
@fun3('张三')
//@ts-ignore
userName:string
}
let obj3 = new Obj3();
console.log( obj3.userName );
六、方法装饰器
function test( target: any, propertyKey: string, descriptor: PropertyDescriptor ) {
console.log( target );
console.log( propertyKey );
console.log( descriptor );
}
class Person {
@test
sayName() {
console.log( 'say name...' )
return 'say name...';
}
}
let p = new Person();
p.sayName()
