console.log('装饰器.......')

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

// 常见：类装饰器，属性装饰器，方法装饰器，参数装饰器

// 写法：1.普通装饰器（无法传参） 2.装饰器工厂（可传参）

// 1.类装饰器

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

// 普通装饰器（无法传参）

function logClass(params: any) {

    console.log(params)

    // 通过原型链拓展类，属性，方法，参数

    params.prototype.apiUrl = 'xxx'

    params.prototype.run = function () {

        console.log('run...........')

    }

}

@logClass

class HttpClient {

    constructor() {}

    getData() {}

}

let http: any = new HttpClient()

console.log(http)

http.run()

// 装饰器工厂（可传参）

function logClass1(params: string) {

    return function (target: any) {

        console.log(params)

        console.log(target)

        target.prototype.apiUrl = params

    }

}

@logClass1('hello')

class HttpClient1 {

    constructor() {}

    getData() {}

}

let http1: any = new HttpClient1()

console.log(http1)

// 重载构造函数

function logClass2(target: any) {

    return class extends target {

        api: any = 'api2222'

        getData() {

            console.log(this.api + '333')

        }

    }

}

@logClass2

class HttpClient2 {

    public api: string | undefined

    constructor() {

        this.api = 'api11111'

    }

    getData() {

        console.log(this.api)

    }

}

let http2: any = new HttpClient2()

console.log(http2)

http2.getData()

// 2.属性装饰器

// 属性装饰器表达式会在运行时被当作函数调用

// 接收两个参数

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

// 2. 成员的名字

// 类装饰器

function logClass3(params: string) {

    return function (target: any) {

        // console.log(params)

        // console.log(target)

        target.prototype.apiUrl = params

    }

}

// 属性装饰器

function logProperty(params: string) {

    return function (target: any, attr: any) {

        // console.log(params)

        // console.log(target)

        target[attr] = params

    }

}

@logClass3('hello33333')

class HttpClient3 {

    @logProperty('hello4444')

    public api: any | undefined

    constructor() {}

    getData() {}

}

let http3: any = new HttpClient3()

console.log(http3)

// 3.方法装饰器

// 应用在方法的属性描述上，可以用来监视、修改、替换方法定义

// 接收三个参数

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

// 2. 成员的名字

// 3. 成员的属性的描述

function logClass4(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(target)

        console.log(methodsName)

        console.log(desc)

        console.log(desc.value)

        let o = desc.value

        desc.value = function (...args: any[]) {

            args = args.map((item) => {

                return String(item) + params

            })

            o.apply(this, args)

        }

    }

}

class HttpClient4 {

    public api: any | undefined

    constructor() {}

    @logClass4('方法装饰器方法装饰器方法装饰器方法装饰器')

    getData(...args: any[]) {

        console.log(args)

        console.log('getDatagetDatagetData')

    }

}

let http4: any = new HttpClient4()

http4.getData(123, 'xxx')

// 4.参数装饰器

// 参数装饰器表达式会在运行时当作函数被调用，可以使参数装饰器为类的原型增加一些元素数据

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

// 2. 参数的名字

// 3. 参数索引

function logClass5(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(target)

        console.log(methodsName)

        console.log(desc)

    }

}

class HttpClient5 {

    public api: any | undefined

    constructor() {}

    getData(@logClass5('参数装饰器参数装饰器') uuid: any) {

        console.log(uuid)

    }

}

let http5: any = new HttpClient5()

http5.getData(1232123)

// 装饰器执行顺序

// 属性>方法参数>方法>>类

// 存在多个同样装饰器则是从下到上执行

function logClass6(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(params)

    }

}

function logClass7(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(params)

    }

}

function logClass8(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(params)

    }

}

function logClass9(params: string) {

    return function (target: any, methodsName: any, desc: any) {

        console.log(params)

    }

}

function logClass10(params: string) {

    return function (target: any) {

        console.log(params)

    }

}

function logClass11(params: string) {

    return function (target: any, attr: any) {

        console.log(params)

    }

}

@logClass10('类装饰器装饰器')

class HttpClient6 {

    @logClass11('属性装饰器')

    public api: any | undefined

    constructor() {}

    @logClass8('方法装饰器装饰器1')

    @logClass9('方法装饰器装饰器2')

    getData(

        @logClass6('参数装饰器1') uuid1: any,

        @logClass7('参数装饰器2') uuid2: any

    ) {

        console.log(uuid1)

        console.log(uuid2)

    }

}

let http6: any = new HttpClient6()

http6.getData(1232123, 234)