JavaScript中鍊式呼叫研習

方法鏈一般適合對一個物件進行連續操作(集中在一句程式碼)。一定程度上可以減少程式碼量，缺點是它佔用了函數的回傳值。

 

一、物件鏈：在方法體內回傳物件實例本身(this)

viewsourceprint?01 function ClassA(){ 

02     this.prop1 = null;

04 this.prop3 = null; 

05 } 

06 ClassA.prototype = { 

07     method 

09         return this; 

10     }, 

11     method2 : function(p2){ 

12         this.prop2 = p2; 

13   this.prop2 = p2; 

13  

15     method3 : function(p3){ 

16         this.prop3 = p3; 

17 return this; 

18     } 

19 }

定義了function/類ClassA。有三個屬性/字段prop1,prop2,prop3，三個方法methed1,method2,method3分別設定prop1,prop2,prop3。

呼叫如下：

view sourceprint?1 var obj = new ClassA(); 

2 obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2).method(3); // obj -> prop1=1,prop2=2 ,prop3=3

可以看到對obj進行了連續三次操作，只要願意ClassA的N多方法都這樣定義，呼叫鏈會一直延續。

該方式缺點是鏈方法唯一地綁定於一種物件類型(ClaaaA)，以這種方式實現鍊式操作，每定義一個類，其方法體中都要返回this。第二種方式可以解決這個問題。

 

二、函數鏈：物件傳入後每次呼叫回傳函數本身

view sourceprint?01 /** 

02  * chain 精簡版 

03  * @param {Object} obj 

04 */

05 function chain(obuncj){ 

07         var Self = arguments.callee; Self.obj = obj; 

08          return Self.obj; 

10         }  

11         Self.obj[arguments[ 0]].apply(Self.obj,[].slice.call(arguments,1)); 

12         return Self; 

16 //定義的function/類ClassB 

17 function ClassB(){ 

18     this.prop1 = null; 

19    

21 } 

22 ClassB.prototype = { 

23     method1 : function(p1){ 

24         this.prop1 = p1; 

27         this.prop2 = p2; 

28     }, 

29       }, 

29       }, 

29    。

呼叫如下：

view sourceprint?1 var obj = new ClassB(); 

2 chain(obj)(method1,4)(method2,5)(method3,6); // obj -> prop1=4,> prop1=4, prop2=5,prop3=6

第一種方式3次呼叫後返回了物件自身，這裡使用一個空"()"取回物件

view sourceprint?1 // result -> prop1=4,prop2 =5,prop3=6 

2 var result = chain(obj)(method1,4)(method2,5)(method3,6)();

這種方式寫類別時方法體中無須返回this，且可以對任何物件進行鍊式呼叫。

兩種的調用方式：

view sourceprint?01 obj 

02     .method1(arg1) 

03     .method1(arg1) 

03   

05     ... 

06       

07 chain(obj) 

08     (method1,arg1) 

09     (method2,arg2)