Js裝飾器？

裝飾器

• 裝飾器:裝飾器是一種特殊類型的聲明，它能夠被附加到類聲明，方法，屬性或參數上，可以修改類的行為。
• 通俗的講裝飾器就是一個方法，可以注入到類、方法、屬性參數上來擴展類、屬性、方法、參數的功能。
• 常見的裝飾器有：類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器
• 裝飾器的寫法：普通裝飾器（無法傳參） 、 裝飾器工廠（可傳參）
• 裝飾器是過去幾年中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(); 

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

   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.屬性修飾符

屬性裝飾器表達式會在運行時當作函數被調用，傳入下列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);

 

總結：

執行順序： 屬性》方法》方法參數》類；如果有多個同樣的裝飾器，它會先執行后面的