typescript-装饰器(七)

装饰器

1. 装饰器是一种特殊的类型声明，它能够被附加到类声明、方法、属性、参数上，可以修改类的行为；
2. 通俗来讲装饰器就是一个方法，可以 被注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能；
3. 常见装饰器有：类装饰器、方法装饰器、属性装饰器、参数装饰器；
4. 装饰器写法：普通装饰器（无法传参）、装饰器工厂（可传参）
5. 装饰器是过去几年最大成就之一，已是es7标准特性之一；

类装饰器

• 类装饰器在类声明之前被声明，（紧靠着类声明），类装饰器应用于类构造函数，可以用来监视、修改或替换类定义；

// 类装饰器:普通装饰器（无法传参)
function logClass(params){
    // params 就是当前类
    console.log(params)
    params.prototype.apiUrl = "动态扩展的属性"
    params.prototype.fetch = function(){
        console.log('我是一个fetch方法')
    }
}

@logClass
class HttpClient {
    constructor(){

    }

    getData(){

    }
}

let http = new HttpClient()
console.log(http.apiUrl) // 动态扩展的属性

http.fetch() // 我是一个fetch方法

// 类装饰器:装饰器工厂（可以传参)
function logClass(params){
    console.log(params)
    // params调用时的实参
    return function(target){
        // target 当前类 HttpClient
          console.log(target)
        params.prototype.apiUrl = params
    }
}

@logClass('newbanker')
class HttpClient {
    constructor(){

    }

    getData(){

    }
}

let http = new HttpClient()
console.log(http.apiUrl) // newbanker

// 装饰器可以修改当前类的构造函数和方法
// 类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一参数
// 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明
// 下面是一个函数重载的例子
function logClass(params){
    console.log(params)
    // params调用时的实参
    return class extends target {

        apiUrl = "我是修改后的数据"
        getData(){
            console.log(this.apiUrl+'------')
        }
    }
}

@logClass
class HttpClient {
    constructor(){
        this.apiUrl = "我是构造函数里面的apiUrl"
    }

装饰器

1. 装饰器是一种特殊的类型声明，它能够被附加到类声明、方法、属性、参数上，可以修改类的行为；
2. 通俗来讲装饰器就是一个方法，可以 被注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能；
3. 常见装饰器有：类装饰器、方法装饰器、属性装饰器、参数装饰器；
4. 装饰器写法：普通装饰器（无法传参）、装饰器工厂（可传参）
5. 装饰器是过去几年最大成就之一，已是es7标准特性之一；

类装饰器

• 类装饰器在类声明之前被声明，（紧靠着类声明），类装饰器应用于类构造函数，可以用来监视、修改或替换类定义；

// 类装饰器:普通装饰器（无法传参)
function logClass(params){
    // params 就是当前类
    console.log(params)
    params.prototype.apiUrl = "动态扩展的属性"
    params.prototype.fetch = function(){
        console.log('我是一个fetch方法')
    }
}

@logClass
class HttpClient {
    constructor(){

    }

    getData(){

    }
}

let http = new HttpClient()
console.log(http.apiUrl) // 动态扩展的属性

http.fetch() // 我是一个fetch方法

// 类装饰器:装饰器工厂（可以传参)
function logClass(params){
    console.log(params)
    // params调用时的实参
    return function(target){
        // target 当前类 HttpClient
          console.log(target)
        params.prototype.apiUrl = params
    }
}

@logClass('newbanker')
class HttpClient {
    constructor(){

    }

    getData(){

    }
}

let http = new HttpClient()
console.log(http.apiUrl) // newbanker

// 装饰器可以修改当前类的构造函数和方法
// 类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一参数
// 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明
// 下面是一个函数重载的例子
function logClass(params){
    console.log(params)
    // params调用时的实参
    return class extends target {

        apiUrl = "我是修改后的数据"
        getData(){
            console.log(this.apiUrl+'------')
        }
    }
}

@logClass
class HttpClient {
    constructor(){
        this.apiUrl = "我是构造函数里面的apiUrl"
    }

    getData(){
        console.log(this.apiUrl)
    }
}

let http = new HttpClient()
console.log(http.apiUrl) // 我是修改后的数据

属性装饰器

• 属性装饰器会在运行时当做函数被调用，传入下列两个参数：
  • 对应静态成员来说是类的构造函数，对于实例成员是类的原型对象；
  • 属性成员的名称；

// 类装饰器:装饰器工厂（可以传参)
function logClass(params){
    console.log(params)
    // params调用时的实参
    return function(target){
        // target 当前类 HttpClient
          console.log(target)
    }
}

// 属性装饰器
function logProperty(params){
    return function(target, attr){
        console.log(target) //
        console.log(attr) // 当前属性url
        target.attr = params
    }
}

@logClass
class HttpClient {
  @logProperty('https://baidu.com')
    public url

    getData(){

    }
}

方法装饰器

• 方法装饰器会被用到方法的属性描述符上，可以用来监视、修改或者替换方法定义；
• 方法装饰器会在运行时传入以下3个参数：
  • 对于静态成员来说是类的构造函数，对于实例来说是类的原型对象；
  • 成员的名字
  • 成员的属性描述符

// 方法装饰器
function logMethod(params){
    return function(target, methodName， desc){
        console.log(target) // 原型对象，可以扩展类的原型属性和方法；
        // 可以扩展当前实例的属性和方法
        target.apiUrl = "http://www.sina.cn"
        target.run = function(){
            console.log('run')
        }

        console.log(methodName) // 当前方法名 getData
        // 修改装饰器的方法，把装饰器方法里面传入的所有参数改为string类型；
        //  保存当前方法
        let save = desc.value
        desc.value = function(...args){
            args.map((v) => {
                return String(v)
            })
            console.log(v)
        }

        console.log(desc) // 描述信息  { value: f, xxx: xxx }
        // 不加此方法会直接替换实例的方法，加上会修改
        save.apply(this, args) // 把当前方法this传进去，代表在这个方法里面调用save方法；并传入参数；
    }
}

class HttpClient {
    public url: any | undefind;
    constructor(){

    }

    @get('http://www.baidu.com')
    getData(args){
        console.log(args) // ['123', 'string']
        console.log('我是getData的method')
    }
}

let http = new HttpClient();

console.log(http.apiUrl) // http://www.sina.cn
http.getData(123, 'string')

方法参数装饰器

• 参数装饰器表达式会在运行时当做函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列三个参数；
  • 对应静态成员来说是类的构造函数，对应实例成员是类的原型对象
  • 参数的名字
  • 参数在函数参数列表中的索引

// 方法参数装饰器
function logParams(params){
    return function(target, paramsName, paramsIndex){
        console.log(params) // xxxx
        console.log(target) //
        console.log(paramsName) // getData
        console.log(paramsIndex) // 0
    }
}

class HttpClient {
    getData(@logParams1('xxxx') uuid: any, @logParams2('xxxx') name: any){
        console.log(uuid) // 123
    }
}
let http: any = new HttpClient();

http.getData(123)

装饰器执行顺序

• 属性 》 方法 》 方法参数 》 类
• 统一类型的装饰器，如果有多个，从后往前、从下往上执行

@logClass1('http:www.baidu.con')
@logClass2('xxxx')
class HttpClient {
    @logAttribute()
    public apiUrl: string | undefind

    constructor(){

    }

    @logMethod()
    getData(){

    }

    setData(@logParams1() attr1: any, @logParams2() attr2: any){

    }
}

let http: any = new HttpClient();
// 属性装饰器 > 方法装饰器 > 方法参数装饰器2 > 方法参数装饰器1 > 类装饰器2 > 类装饰器1