一、裝飾器

裝飾器是一種特殊型別的宣告，它能夠被附加到類宣告，方法，屬性或引數上，可以修改類的行為。
通俗的講裝飾器就是一個方法，可以注入到類、方法、屬性引數上來擴充套件類、屬性、方法、引數的功能。
常見的裝飾器有：類裝飾器、屬性裝飾器、方法裝飾器、引數裝飾器
裝飾器的寫法：普通裝飾器（無法傳參） 、 裝飾器工廠（可傳參）

裝飾器是過去幾年中js最大的成就之一，已是Es7的標準特性之一

二、類裝飾器：

類裝飾器在類宣告之前被宣告（緊靠著類宣告）。

類裝飾器應用於類建構函式，可以用來監視，修改或替換類定義。 傳入一個引數

1、 類裝飾器:普通裝飾器（無法傳參）

function logClass(params
 
: any) {

    console.log(params);
    // params 就是當前類
    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.itying.com/api')
class HttpClient {
    constructor() {
    }

    getData() {

    }
}

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

下面是一個用類裝飾器過載建構函式的例子。

類裝飾器表示式會在執行時當作函式被呼叫，類的建構函式作為其唯一的引數。

如果類裝飾器返回一個值，它會使用提供的建構函式來替換類的宣告。

function logClass(target: any) {
    console.log(target);
    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 = '我是建構函式裡面的apiUrl';
    }
    getData() {
        console.log(this.apiUrl);
    }
}

var http = new HttpClient();
http.getData();

三、屬性裝飾器

屬性裝飾器表示式會在執行時當作函式被呼叫，傳入下列2個引數：
1、對於靜態成員來說是類的建構函式，對於例項成員是類的原型物件。
2、成員的名字。

//類裝飾器
function logClass(params: string) {
    return function (target: any) {
        // console.log(target);
        // console.log(params);       

    }
}

//屬性裝飾器
function logProperty(params: any) {
    return function (target: any, attr: any) {
        console.log(target);
        console.log(attr);
        target[attr] = params;
    }
}
@logClass('xxxx')
class HttpClient {
    @logProperty('http://itying.com')
    public url: any | undefined;
    constructor() {
    }
    getData() {
        console.log(this.url);
    }
}
var http = new HttpClient();
http.getData();

四、方法裝飾器

它會被應用到方法的 屬性描述符上，可以用來監視，修改或者替換方法定義。

方法裝飾會在執行時傳入下列3個引數：
1、對於靜態成員來說是類的建構函式，對於例項成員是類的原型物件。
2、成員的名字。
3、成員的屬性描述符。

*/

/*

五、方法引數裝飾器

引數裝飾器表示式會在執行時當作函式被呼叫，傳入下列3個引數：

1、對於靜態成員來說是類的建構函式，對於例項成員是類的原型物件。
2、引數的名字。
3、引數在函式引數列表中的索引。
*/