Two types of chain call implementation codes in JavaScript_javascript skills

1. The method body returns the object instance itself (this)

Copy the code The code is as follows:

function ClassA(){
this.prop1 = null;
this.prop2 = null;
this.prop3 = null;
}
ClassA.prototype = {
method1 : function(p1){
this.prop1 = p1;
return this;
},
method2 : function(p2){
this.prop2 = p2;
return this;
},
method3 : function(p3){
this.prop3 = p3;
return this;
}
}

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

Copy code The code is as follows:

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

It can be seen that obj has been operated on three consecutive times. 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. After the object is passed in, each call returns the function itself

Copy the code The code is as follows:

/**
* chain lite version
* @param {Object} obj
*/
function chain(obj){
return function(){
var Self = arguments.callee; Self.obj = obj;
if(arguments.length==0){
return Self.obj;
}
Self.obj[arguments[0]].apply(Self.obj,[].slice.call (arguments,1));
return Self;
}
}

//Defined function/class ClassB
function ClassB(){
this.prop1 = null;
this.prop2 = null;
this.prop3 = null;
}
ClassB.prototype = {
method1 : function(p1){
this.prop1 = p1 ;
},
method2 : function(p2){
this.prop2 = p2;
},
method3 : function(p3){
this.prop3 = p3;
}
}

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

The chain call is as follows:

Copy code The code is as follows:

var obj = new ClassB();
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

Copy code The code is as follows:

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

When writing a class in this way, there is no need to include it in the method body Returns this and can chain calls to any object.

Summarize the two calling methods in terms of writing:

Copy the code The code is as follows:

obj
.method1(arg1)
.method2(arg2)
.method3(arg3)
...

chain(obj)
(method1,arg1)
(method2,arg2)
(method3,arg3)
...

Finally, thanks to Muhai, I got it from the wee library Get inspired by the above.

/201101/yuanma/chain.rar