装饰器
装饰器是一种特殊类型的声明,它能够被附加到类的声明、方法、属性、参数上,可以改变类的行为。通俗来讲装饰器就是一个方法,可以注入到类、方法、属性、参数上,来扩展类方法属性参数的功能(过去几年js最大的成就之一,es7的标准)。
常见的装饰器有
类装饰器、属性装饰器、方法装饰器、参数装饰器。
装饰器的写法
普通装饰器(无法传参)、装饰器工厂(可以传参)。
1、类装饰器:在类声明之前声明(紧挨着类声明)
1.1普通装饰器(无法传参)
function logClass(params:any){
// console.log(params)
params.prototype.name = '张三';
params.prototype.run = function (){
console.log(this.name+'在跑')
}
}
@logClass
class Http{
public name:String | undefined;
constructor(){
}
getData():void{
console.log(this.name)
}
}
var h:any = new Http();
h.getData();
h.run();
1.2装饰器工厂(可以传参)
function logClass(params:string):any{
return function(target:any){
target.prototype.name = params;
target.prototype.run = function (){
console.log(this.name+'在跑')
}
}
}
@logClass('李四')
class Http{
public name:String | undefined;
constructor(){
}
getData():void{
console.log(this.name)
}
}
var h:any = new Http();
h.getData();
h.run();
类装饰器重载一个构造函数
function logClass(params:any){
return class extends params{
name = '李四';
getData():void{
console.log(this.name)
}
}
}
@logClass
class Http{
public name:String | undefined;
constructor(){
this.name = '张三';
}
getData():void{
console.log(this.name)
}
}
var h:any = new Http();
h.getData();
2、属性装饰器
两个参数:第一个是构造函数(实例来说是原型对象),第二是成员的名字(属性名)
function logClass(params:string):any{
return function(target:any,attr:any){
// console.log(target) 构造函数
// console.log(attr) 属性名称
target[attr] = params;
target.run = function (){
console.log(this.name+'在跑')
}
}
}
class Http{
@logClass('王五')
public name:String | undefined;
constructor(){
}
getData():void{
console.log(this.name)
}
}
var h:any = new Http();
h.getData();
h.run();
3、方法装饰器
三个参数:第一个是构造函数(实例来说是原型对象),第二是方法名,第三个是方法的描述(desc.value就是方法本身)
function logClass(params:string):any{
return function(target:any,methodName:any,desc:any){
console.log(target) //构造函数(原型对象)
console.log(methodName) //方法名称
console.log(desc) //方法描述
console.log(desc.value) //方法本身
console.log(params) //传入参数
var method = desc.value;
desc.value = function (...args:any[]){
args = args.map((value)=>{
return String(value)
})
// console.log(args);
method.apply(this,args);
}
}
}
class Http{
public name:String | undefined;
constructor(){
}
@logClass('晨晨')
getData(...args:any[]):void{
console.log(args)
}
}
var h:any = new Http();
h.getData(125,'5556');
4、方法参数装饰器
三个参数:第一是构造函数(实例来说是原型对象),第二是方法名,第三个是参数在参数中 的索引
function logClass(params:string):any{
return function(target:any,methodName:any,paramsIndex:any){
console.log(target) //构造函数(原型对象)
console.log(methodName) //方法名称
console.log(paramsIndex) //方法描述
console.log(params) //传入参数
}
}
class Http{
public name:String | undefined;
constructor(){
}
getData(@logClass('小罗') uuid:any):void{
console.log(uuid)
}
}
var h:any = new Http();
h.getData(50);
装饰器执行的顺序
属性装饰器—方法装饰器----方法参数装饰器----类装饰器
如果有多个同样的装饰器,它会从后向前执行。