Método de llamada en cadena en Javascript

Prefacio

El concepto de llamada en cadena de métodos es en realidad una sintaxis relativamente común en la programación orientada a objetos, que permite a los usuarios llamar continuamente a diferentes métodos en un objeto. Complete la llamada continua de varios métodos en una declaración sin utilizar variables temporales para almacenar resultados intermedios.

En el proceso de uso de jquery, a menudo se usan llamadas en cadena, como:

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

A continuación, usamos un ejemplo de objeto de calculadora simple para simular la realización de dicha llamada en cadena.

Crea un objeto para llamadas encadenadas

Primero creamos un objeto con una función:

const calObj = function(){
    
    }

Dado que es un objeto de calculadora, debe contener las siguientes propiedades y métodos

• atributo num, utilizado para almacenar el valor de resultado de la calculadora actual
• agregar método, agregar valor a num
• método min, devaluar num
• método claro, num se establece en 0

el código se muestra a continuación:

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

Luego intenta llamarlo para lograr el efecto de 0 + 1

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

Si llamamos al método add y queremos seguir restando un número para lograr el efecto de 0 + 1-2, debemos escribir:

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

Después de ejecutar el código anterior, encontrará que se informa un error directamente, lo que indica que no se puede encontrar el método min.

¿Por qué informar de un error?

En calObjel addmétodo del objeto definido anteriormente , no especificamos explícitamente su valor de retorno, por lo que, de hecho, regresará después de la ejecución undefined. En la undefinedllamada al minmétodo, está obligado a error.

Solución

Si desea llamar al addmétodo inmediatamente después de llamar al minmétodo, solo necesita addagregar uno al método return this. Es así de simple, devuelve una referencia al objeto en sí.

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

En este momento llamamos a cualquier método, devolverá el objeto en sí

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

Ahora, independientemente del método que se transfiera, puede continuar llamando a otros métodos del objeto mediante el encadenamiento, hasta que no desee volver a llamarlo.

Volviendo al 0+1-2código de implementación mencionado anteriormente , ahora se puede llamar normalmente:

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

Utilice cierres para implementar llamadas encadenadas

¿Se pueden realizar llamadas en cadena sin usar nuevas? La respuesta debe ser sí, solo se puede lograr utilizando cierres.

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

De esta forma, puede utilizar llamadas en cadena sin newuna obj.

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