Study on chained calls in JavaScript

Method chain is generally suitable for continuous operations on an object (concentrated in one line of code). It can reduce the amount of code to a certain extent, but the disadvantage is that it occupies the return value of the function.

1. Object chain: The method body returns the object instance itself (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 }

defines function/class ClassA. There are three attributes/fields prop1, prop2, and prop3, and three methods method1, method2, and method3 respectively set prop1, prop2, and prop3.
The call is as follows:

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

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

You can see that obj has been operated three times in a row. As long as the N methods of ClassA are defined in this way, the call chain will continue.

The disadvantage of this method is that the chain method is uniquely bound to one object type (ClaaaA). To implement chain operations in this way, every time a class is defined, this must be returned in its method body. The second way can solve this problem.

2. Function chain: After the object is passed in, each call returns the function itself

view sourceprint?01 /**

02 * chain lite version

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

Note that this is no longer returned in method1, method2, and method3 of ClassB.

The call is as follows:

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

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

The first method returns the object itself after three calls. Here, an empty "()" is used to retrieve the object

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

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

When writing a class in this way, there is no need to return this in the method body , and chain calls can be made to any object.

Two calling methods:

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