typescrip装饰器 执行顺序

TypeScript学习 装饰器执行顺序

在TypeScript中,装饰器的执行顺序为:单一的执行顺序是首先执行属性装饰器,然后执行方法装饰器,其次是方法参数装饰器,最后是类装饰器。如果同一个类型的装饰器有多个,总是先执行后面的装饰器。

属性装饰器是从上而下,参数装饰器是先执行后者

// 类装饰器1
function testClass1(params:string){
    return function(target:any){
        console.log('类装饰器1' + params)
    }
}
// 类装饰器2
function testClass2(params:string){
    return function(target:any){
        console.log('类装饰器2' + params)
    }
}
// 属性装饰器
function testAttribute(params?:string){
    return function(target:any,attrName:any){
        console.log('属性装饰器' + params)
    }
}
// 方法装饰器
function logMethod(params?:string){
    return function(target:any,methodName:any,desc:any){
        console.log('方法装饰器' + params)
    }
}
// 方法参数装饰器1
function testParmas1(params?:string){
    return function(target:any,methodName:any,paramsIndex:any){
        console.log('方法参数装饰器1' + params)
    }
}
// 方法参数装饰器2
function testParmas2(params?:string){
    return function(target:any,methodName:any,paramsIndex:any){
        console.log('方法参数装饰器2' + params)
    }
}
 
@testClass1('www.baidu.com')
@testClass2('www.qq.com')
class TestClass{
    @testAttribute('url')
    public url: string | undefined;
    @testAttribute('url1')
    public url1: string | undefined;
    
    constructor(@testParmas1('constructor 实例化 TestClass') attr1:any,@testParmas2('constructor 实例化 TestClass') attr2:any) { 
        console.log('实例化 TestClass');
    }
    
    @logMethod('getData1')
    getData1(@testParmas1('getData1') attr1:any,@testParmas2('getData1') attr2:any) { }
    @logMethod('getData2')
    getData2(@testParmas1('getData2') attr1:any,@testParmas2('getData2') attr2:any) { }
    
    setData(@testParmas1() attr1:any,@testParmas2() attr2:any){
 
    }
}
 
var http = new TestClass();
// 属性装饰器url
// 属性装饰器url1
// 方法参数装饰器2getData1
// 方法参数装饰器1getData1
// 方法装饰器getData1
// 方法参数装饰器2getData2
// 方法参数装饰器1getData2
// 方法装饰器getData2
// 方法参数装饰器2undefined
// 方法参数装饰器1undefined
// 方法参数装饰器2constructor 实例化 TestClass
// 方法参数装饰器1constructor 实例化 TestClass
// 类装饰器2www.qq.com
// 类装饰器1www.baidu.com
// 实例化 TestClass
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值