Method chain call in Javascript

Preface

The concept of method chain call is actually a relatively common grammar in object-oriented programming, which allows users to continuously call different methods on an object. Complete the continuous call of multiple methods on a statement without using temporary variables to store intermediate results.

In the process of using jquery, chain calls are often used, such as:

$('#forevercjl').addClass('px').removeClass('xp');

Below we use a simple calculator object example to simulate the realization of such a chain call.

Create an object for chained calls

First we create an object with a function:

const calObj = function(){
    
    }

Since it is a calculator object, it needs to contain the following properties and methods

• num attribute, used to store the result value of the current calculator
• add method, add value to num
• min method, devalue num
• clear method, num is set to 0

code show as below:

const calObj = function(){
    
    
	this.num = 0;
	
	this.add = function(number){
    
    
		this.num = this.num + number;
	}
	
	this.min = function(number){
    
    
		this.num = this.num - number;
	}
	
	this.clear = function(){
    
    
		this.num = 0;
	}
}

Then try to call it to achieve the effect of 0+1

const co = new calObj();
co.add(1); //1

If we call the add method and want to continue to subtract a number to achieve the effect of 0+1-2, we should write:

const co = new calObj();
co.add(1).min(2); //Uncaught TypeError: Cannot read property 'min' of undefined at <anonymous>:2:10

After executing the above code, you will find that an error is reported directly, indicating that the min method cannot be found.

Why report an error?

In calObjthe addmethod of the object defined above , we did not explicitly specify its return value, so in fact it will return after execution undefined. In the undefinedcall to the minmethod, it is bound to error.

Solution

If you want to call the addmethod immediately after calling the minmethod, you only need to addadd one to the method return this. It's that simple, return a reference to the object itself.

const calObj = function(){
    
    
	this.num = 0;
	
	this.add = function(number){
    
    
		this.num = this.num + number;
		return this;
	}
	
	this.min = function(number){
    
    
		this.num = this.num - number;
		return this;
	}
	
	this.clear = function(){
    
    
		this.num = 0;
		return this;
	}
}

At this time we call any method, it will return the object itself

const co = new calObj();
console.log(co.add(1)); 

Now no matter which method is transferred, you can continue to call other methods of the object through chaining, until you don't want to call it again.

Going back to 0+1-2the implementation code mentioned earlier , it can now be called normally:

const co = new calObj();
co.add(1).min(2); //-1

Use closures to implement chained calls

Can chain calls be realized without using new? The answer must be yes, it can be achieved only by using closures.

const calObj = function(){
    
    
	let num = 0;
	
	let add = function(number){
    
    
		num = num + number;
		return this;
	}
	
	let min = function(number){
    
    
		num = num - number;
		return this;
	}
	
	let clear = function(){
    
    
		num = 0;
		return this;
	}	
	return {
    
    
		add,
		min,
		clear
	}	
}

This way, you can use chain calls without newone obj.

const co = calObj();
co.add(1).min(2);  //-1