TypeScript 学习笔记07-装饰器（类装饰器、属性装饰器、方法装饰器、参数装饰器）

装饰器：装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，可以修改类的行为。

通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法：普通装饰器（无参数） 、 装饰器工厂（可传参）

装饰器是过去几年种js最大的成就之一，已经es7的标准特性之一

类装饰器

普通装饰器

function logCall (target:any) {
    console.log(target) // httpClient类
    target.prototype.api = '127.0.0.1'
}

@logCall
class httpClient {

    constructor(){}
    getData(){}
}

var http:any = new httpClient()

console.log(http.api) // 127.0.0.1

装饰器工厂(可传参)

function logCall(params:any){
    return function(target:any) {
        console.log(target) // httpClient类
        console.log(params) // 装饰器参数
        target.prototype.api = '127.0.0.1'

    }
}
@logCall('装饰器参数')
class httpClient {
    constructor(){}
    getData(){}
}

var http:any = new httpClient()

console.log(http.api) // 127.0.0.1

重载构造函数

类装饰器表达式会在运行时，当作函数被调用，类的构造函数作为唯一的参数如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明

    function logClass(target:any) {
        return class extends target {
            apiUrl: string = 'this is new target'
            getData() {
                console.log(this.apiUrl)  // 执行打印 this is new target
            }
        }
    }

     @logClass
     class httpClient {
        apiUrl: string | undefined
        constructor(apiUrl:string){
            this.apiUrl = apiUrl
        }
        getData(){
            console.log(this.apiUrl)  // 未执行
        }
     }

    var http = new httpClient('127.0.0.1')
    http.getData()

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入2个参数

1、对于静态成员来说时类的构造函数，对于实例成员时类的原型对象

2、成员的名字

function logClass (params:any) {
        return function (target:any,name:any) {
            console.log(target) // 原型对象
            console.log(name)  // api
            target[name] = params
        }
    }



    class httpClient {
         @logClass('http://mp.csdn.net')
         api:string |undefined
         constructor() {}
         getData() {}
    }

    var http = new httpClient()

    console.log(http.api) // http://mp.csdn.net

方法装饰器

它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法的定义

方法装饰会在运行时传入下列3个参数

1、对于静态成员来说是类的构造函数，对于实例陈冠是类的原型对象

2、成员的名字

3、成员的属性描述符

function logClass() {
         return function(target:any,mountedName:any,desc:any) {
            console.log(target) // 原型对象
            console.log(mountedName) // getData
            console.log(desc) // 属性
            var oMethod = desc.value
            desc.value = function () {
                console.log('this is target get')
                // 对象冒充
                oMethod.apply(this)
            }
         }
     }



     class httpClient {
         constructor(){}
         @logClass()
         getData(){
             console.log('this is http get')
         }
     }

     var http = new httpClient()
     http.getData()
     // this is target get
     // this is http get

方法参数装饰器

方法参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数

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

2、类的名字

3、参数在函数参数列表的索引

function logClass(params:any) {
        return function (target:any,attr:any,index:any) {
            console.log(params) // uuid
            console.log(target) // 原型对象
            console.log(attr) // getData
            console.log(index) // 
            target['api'] = params
        }
    }


    class httpClient{
        apiUrl: string | undefined
        constructor(){}
        getData(@logClass('uuid') str:any){
            console.log(str) // 123456
            console.log('我是getData原有方法') // 我是getData原有方法
        }
    }

    var http:any = new httpClient()

    http.getData('123456') 

    console.log(http.api) // uuid

装饰器执行排序

属性装饰器>>方法装饰器>>方法参数装饰器2>>方法参数装饰器1>>类修饰装饰器2>>类修饰装饰器1