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 ...