您好,欢迎访问一九零五行业门户网

JavaScript中链式调用之研习

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量,缺点是它占用了函数的返回值。
一、对象链:方法体内返回对象实例自身(this)
view sourceprint?01 function classa(){ 
02     this.prop1 = null; 
03     this.prop2 = null; 
04     this.prop3 = null; 
05 } 
06 classa.prototype = { 
07     method1 : function(p1){ 
08         this.prop1 = p1; 
09         return this; 
10     }, 
11     method2 : function(p2){ 
12         this.prop2 = p2; 
13         return this; 
14     }, 
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,prop3=3
可以看到对obj进行了连续三次操作,只要愿意classa的n多方法都这样定义,调用链会一直延续。
该方式缺点是链方法唯一地绑定于一种对象类型(claaaa),按这种方式实现链式操作,每定义一个类,其方法体中都要返回this。第二种方式可以解决这个问题。
二、函数链:对象传入后每次调用返回函数自身
view sourceprint?01 /** 
02  * chain 精简版 
03  * @param {object} obj 
04  */
05 function chain(obj){ 
06     return function(){ 
07         var self = arguments.callee; self.obj = obj; 
08         if(arguments.length==0){ 
09             return self.obj; 
10         }  
11         self.obj[arguments[0]].apply(self.obj,[].slice.call(arguments,1)); 
12         return self; 
13     } 
14 } 
15   
16 //定义的function/类classb 
17 function classb(){ 
18     this.prop1 = null; 
19     this.prop2 = null; 
20     this.prop3 = null; 
21 } 
22 classb.prototype = { 
23     method1 : function(p1){ 
24         this.prop1 = p1; 
25     }, 
26     method2 : function(p2){ 
27         this.prop2 = p2; 
28     }, 
29     method3 : function(p3){ 
30         this.prop3 = p3; 
31     } 
32 }
注意classb的method1,method2,method3中不再返回this了。
调用如下:
view sourceprint?1 var obj = new classb(); 
2 chain(obj)(method1,4)(method2,5)(method3,6); // obj -> 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     .method2(arg2) 
04     .method3(arg3) 
05     ... 
06       
07 chain(obj) 
08     (method1,arg1) 
09     (method2,arg2) 
10     (method3,arg3) 
11     ...
其它类似信息

推荐信息