装饰器 TypeScript

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

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

常见的装饰器有 ： 类装饰器， 属性装饰器 ， 方法装饰器 ， 参数装饰器
装饰器是过去几年中js最大的成就之一 ，已是ES7的标准特征之一

1、装饰器 （普通装饰器 ， 无法传参）

function logClass(params: any) {
    console.log(params) //这里params 打印出来的是HttpClient（）{}
    params.prototype.apiUrl = '动态扩展的属性'
    params.prototype.run = function () {
        console.log('我是一个run方法')
    }
}

@logClass
class HttpClient {
    constructor() {

    }
    getData() {

    }
}
var http: any = new HttpClient()
console.log(http.apiUrl)
http.run();

2、装饰器 （装饰器工厂 ， 可以传参）

function logClass(params: string) {
    return function (target: any) {
        console.log(target)
        console.log(params)
        target.prototype.apiUrl = params
    }
}

@logClass('http://www.baidu.com')
class HttpClient {
    constructor() {

    }
    getData() { }
}
var http: any = new HttpClient();
console.log(http.apiUrl)

3、类装饰器 (重载构造函数)

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

function logClass(target: any) {
    console.log(target) // HttpClient(){}
    return class extends target {
        apiUrl: any = '修改后的数据'
        getData() {
            this.apiUrl = this.apiUrl + '---'
            console.log(this.apiUrl)
        }
    }
}

@logClass
class HttpClient {
    public apiUrl: string | undefined
    constructor() {
        this.apiUrl = '构造函数的api'
    }
    getData() {
        console.log(this.apiUrl)
    }
}
var http: any = new HttpClient();
http.getData() //修改后的数据--- 

4 、属性装饰器

属性装饰器表达式会在运行时当作函数被调用 ，传入下列两个参数：
1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.成员的名字

function logClass(params: string) {
    return function (target: any) {
    }
}
function logProperty(params: any) {
    return function (target: any, attr: any) {
        console.log(target)
        console.log(attr)
        target[attr] = params
    }
}

@logClass('hahah')
class HttpClient {
    @logProperty ('http://www.baidu.com')
    public url:any | undefined
    constructor(){}
    getData(){
        console.log(this.url)
    }
}
var http = new HttpClient()
http.getData() //http://www.baidu.com

5、方法装饰器

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

6、方法参数装饰器

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

最后 ，装饰器的执行顺序

属性>方法>方法参数>类（如果有多个同样的装饰器，它会先执行后面的）