JavaScript中链式调用之研习

Question

转：Snandy

JavaScript中链式调用之研习

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

一、对象链：方法体内返回对象实例自身(this)

1. 01 function ClassA(){  
3. 02     this.prop1 = null;  
5. 03     this.prop2 = null;  
7. 04     this.prop3 = null;  
9. 05 }  
11. 06 ClassA.prototype = {  
13. 07     method1 : function(p1){  
15. 08         this.prop1 = p1;  
17. 09         return this;  
19. 10     },  
21. 11     method2 : function(p2){  
23. 12         this.prop2 = p2;  
25. 13         return this;  
27. 14     },  
29. 15     method3 : function(p3){  
31. 16         this.prop3 = p3;  
33. 17         return this;  
35. 18     }  
37. 19 }

复制代码定义了function/类ClassA。有三个属性/字段prop1,prop2,prop3，三个方法methed1,method2,method3分别设置prop1,prop2,prop3。
调用如下：

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

复制代码可以看到对obj进行了连续三次操作，只要愿意ClassA的N多方法都这样定义，调用链会一直延续。

该方式缺点是链方法唯一地绑定于一种对象类型(ClaaaA)，按这种方式实现链式操作，每定义一个类，其方法体中都要返回this。第二种方式可以解决这个问题。

二、函数链：对象传入后每次调用返回函数自身

1. 01 /**  
3. 02  * chain 精简版  
5. 03  * @param {Object} obj  
7. 04  */
9. 05 function chain(obj){  
11. 06     return function(){  
13. 07         var Self = arguments.callee; Self.obj = obj;  
15. 08         if(arguments.length==0){  
17. 09             return Self.obj;  
19. 10         }   
21. 11         Self.obj[arguments[0]].apply(Self.obj,[].slice.call(arguments,1));  
23. 12         return Self;  
25. 13     }  
27. 14 }  
29. 15   
31. 16 //定义的function/类ClassB  
33. 17 function ClassB(){  
35. 18     this.prop1 = null;  
37. 19     this.prop2 = null;  
39. 20     this.prop3 = null;  
41. 21 }  
43. 22 ClassB.prototype = {  
45. 23     method1 : function(p1){  
47. 24         this.prop1 = p1;  
49. 25     },  
51. 26     method2 : function(p2){  
53. 27         this.prop2 = p2;  
55. 28     },  
57. 29     method3 : function(p3){  
59. 30         this.prop3 = p3;  
61. 31     }  
63. 32 }

复制代码注意ClassB的method1,method2,method3中不再返回this了。
调用如下：

1. 1 var obj = new ClassB();  
3. 2 chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6

复制代码第一种方式3次调用后返回了对象自身，这里使用一个空"()"取回对象

1. 1 // result -> prop1=4,prop2=5,prop3=6  
3. 2 var result = chain(obj)('method1',4)('method2',5)('method3',6)();
4. 这种方式写类时方法体中无须返回this，且可以对任何对象进行链式调用。
6. 两种的调用方式：
8. view sourceprint?
9. 01 obj  
11. 02     .method1(arg1)  
13. 03     .method2(arg2)  
15. 04     .method3(arg3)  
17. 05     ...  
19. 06        
21. 07 chain(obj)  
23. 08     (method1,arg1)  
25. 09     (method2,arg2)  
27. 10     (method3,arg3)  
29. 11     ...

复制代码