Study on chain calls in JavaScript_javascript skills

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

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

Can be viewed After three consecutive operations on obj, 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

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 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 return this in the method body, and any object can be chained call.
Two calling methods:

Copy code The code is as follows:

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

Related:
The evolution of my function chain