位置:首页 > web前端 > typescript

typescript方法装饰器以及装饰器执行的顺序

dearweb 发布:2021-08-01 11:31:36阅读:

方法装饰器会被应用到方法的属性描述符上,可以用来监视,修改或者替换方法的定义,会在运动时传入下列3个参数

1.对于静态成员来说是类的构造函数,对于实例成员是类的原型对象;

2.成员的名字;

3.成员的属性描述符;

方法装饰器一

// 方法装饰器一

    function logMethod(params:any){
        return function(target:any,methodName:any,desc:any){
            console.log(target,methodName,desc)

            target.apiUrl = 'nnnnnnn'
            target.run = function(){
                console.log('run')
            }
        }
    }

    class HttpClient {
        public url:any| undefined
        constructor() {
        }
        @logMethod('http:dearweb.cn')
        getData(){
            console.log(this.url)
        }
    }

方法装饰器二

 function logMethod(params:any){
        return function(target:any,methodName:any,desc:any){
            // console.log(target,'\n',methodName,'\n',desc.value)
            // 修改装饰器的方法 把装饰器方法里面传入的所有参数改为string类型

            // 保存当前方法

            let oMethod= desc.value
            desc.value = function(...args:any[]){
                args = args.map((value)=>{
                    return String(value)
                })
                console.log(args) // ["123", "456"]
                oMethod.apply(this,args)
            }

        }
    }

    class HttpClient {
        public url:any| undefined
        constructor() {
        }
        @logMethod('http:dearweb.cn')
        getData(...args:any[]){
                console.log(args)  // ["123", "456"]
                console.log('我是get方法')
        }
    }

    let http = new HttpClient()
    http.getData(123,'456')

小伙伴们上面就是方法装饰器的基本用法,你们看懂了吗?

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看