一、什么是装饰器
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。
使用 @ 符号加一个名字来定义，名字没有任何要求随你自己命名，这个名字必须是一个函数或者求值后是一个函数，这个函数在运行的时候会被调用，被装饰的声明信息做为参数自动传入
通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）
装饰器：本质是一个方法，可以注入到类、方法、属性参数上来拓展类、属性、方法、参数的功能.
1、类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数
装饰器相当于创建了一个父类，然后紧贴下面的类当做它的子类，每次实例化子类的时候都存在父类的方法和属性
1.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();
1.2 类装饰器:装饰器工厂（可传参）
function logClass(params:string){
return function(target:any){
console.log(target);
console.log(params);
target.prototype.apiUrl=params;
}
}
@logClass('http://www.loaderman.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、属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下列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://loaderman.com')
public url:any |undefined;
constructor(){
}
getData(){
console.log(this.url);
}
}
var http=new HttpClient();
http.getData();
3、方法装饰器
它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性描述符。
方法装饰器一，在方法装饰器里面修改实例的属性和方法
function get(params :any){
console.log(params);
return function(target: any,methodName : any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
target.apiUrl="xxxx" ;
target.run=function(){
console.log( "run" );
}
}
}
class Httpclient{
public url:any |undefined;
constructor(){
}
@get("http://www.itying.com")
getData(){
console.log(this.url);
}
}
var http: any = new Httpclient()
console.log(http.apiUrl);
http.run();
方法装饰器二, 在方法装饰器里面修改当前方法。把当前方法里面的参数修改成字符串
function get(params :any){
console.log(params);
return function(target: any,methodName : any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc.value);
//修改装饰器的方法﹑把装饰器方法里面传入的所有参数改为string类型
//1、保存当前的方法
var oMethod = desc.value;
desc.value = function(...args:any[]){
args = args.map((value) => {
return String(value)
})
console.log(args);
oMethod.apply(this,args)
}
}
}
class Httpclient{
public url:any |undefined;
constructor(){
}
@get("http://www.itying.com")
getData(...args:any[]){
console.log("我是getData里面的方法",args);
}
}
var http = new Httpclient();
http.getData(123,'xxx')
4、方法参数装饰器（很少使用）
参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、方法的名字。
3、参数在函数参数列表中的索引。
function logParams(params :any){
console.log(params);
return function(target: any, methodsName : any, paramsIndex:any){
console.log(target);
console.log(methodsName);
console.log(paramsIndex);
}
}
class Httpclient{
public url:any |undefined;
constructor(){
}
getData(@logParams("uuid") uuid: any){
console.log("我是getData里面的方法");
console.log(uuid);
}
}
var http = new Httpclient();
http.getData(123456)
装饰器加载顺序
function ClassDecorator() {
return function (target) {
console.log("I am class decorator");
}
}
function MethodDecorator() {
return function (target, methodName: string, descriptor: PropertyDescriptor) {
console.log("I am method decorator");
}
}
function Param1Decorator() {
return function (target, methodName: string, paramIndex: number) {
console.log("I am parameter1 decorator");
}
}
function Param2Decorator() {
return function (target, methodName: string, paramIndex: number) {
console.log("I am parameter2 decorator");
}
}
function PropertyDecorator() {
return function (target, propertyName: string) {
console.log("I am property decorator");
}
}
@ClassDecorator()
class Hello {
@PropertyDecorator()
greeting: string;
@MethodDecorator()
greet( @Param1Decorator() p1: string, @Param2Decorator() p2: string) { }
}
输出结果：
I am property decorator
I am parameter2 decorator
I am parameter1 decorator
I am method decorator
I am class decorator
从上述例子得出如下结论：
1、属性装饰器 》方法装饰器》方法参数 装饰器》类装饰器
2、如果有多个同样的装饰器时：从最后一个装饰器依次向前执行
3、方法装饰器和属性装饰器，谁在前面谁先执行。因为参数属于方法一部分，所以参数会一直紧紧挨着方法执行。上述例子中属性和方法调换位置，输出如下结果：
I am parameter2 decorator
I am parameter1 decorator
I am method decorator
I am property decorator
I am class decorator