Js裝飾器？

阿新 • • 發佈：2020-12-12

裝飾器

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

1.類修飾器

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

 function logClass(params:any){

console.log(params);
    // params 就是當前類
    params.prototype.apiUrl='動態擴充套件的屬性';
    params.prototype.run=function(){
    	console.log('我是一個run方法');
    }

}

@logClass
class HttpClient{
    const 
ructor(){
    }
    getData(){

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

②類裝飾器:裝飾器工廠（可傳參）

   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{
       const 
ructor(){
       }
       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 logProperty(params:any){
        return function(target:any,attr:any){
            console.log("logProperty",target);
            console.log("logProperty",attr);
            target[attr]=params;
        }
    }
    
 class HttpClient{
     @logProperty('http://itying.com1')
     public url:any |undefined;
     constructor(){
     }
     getData(){
     	console.log(this.url);
     }
 }
 var http=new HttpClient();
 http.getData();

3.方法裝飾器

 function get(params:any){
     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);
            })
            oMethod.apply(this,args);
            }
        }
    }
class HttpClient{  
    public url:any |undefined;
    constructor(){
    }
    @get('http://www.itying,com')
    getData(...args:any[]){
        console.log(args);
        console.log('我是getData裡面的方法');
    }
}

var http=new HttpClient();
http.getData(123,'xxx');

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

4.引數裝飾器

引數裝飾器表示式會在執行時當作函式被呼叫，可以使用引數裝飾器為類的原型增加一些元素資料，傳入下列3個引數：

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

function logParams(params:any){
  return function(target:any,methodName:any,paramsIndex:any){
      console.log(params);
      console.log(target);
      console.log(methodName);
      console.log(paramsIndex);
      target.apiUrl=params;
  }   
}
class HttpClient{
public url:any |undefined; constructor(){ }
getData(@logParams('xxxxx') uuid:any){
console.log(uuid); } }
var http:any = new HttpClient(); http.getData(123456); console.log( http.apiUrl);