Encadenar métodos

El encadenamiento de métodos – method chaining – es una técnica la cuál permite ejecutar un método después de otro sin necesidad de volver a utilizar el objeto.

Cuando empezamos a programar en objetos generalmente hacemos esto:

Definir el objeto con sus atributos y métodos:

var Dummy = function () {
  this.nombre = 'dummy';
  this.debug_nombre = debug_nombre;
  this.mostrar_nombre = mostrar_nombre;
  this.otro_valor = otro_valor;

  function debug_nombre() {
    console.log("Soy: " + this.nombre);
  }
  
  function mostrar_nombre () {
    alert("Soy: " + this.nombre);
  }
  
  function otro_valor(param) {
    if (param !== undefined) {
      console.log("Otro:" + param);
    } else {
      console.log("Otro valor");      
    }
  } 

}

Mandamos llamar los métodos con el objeto:

/*
Con el código anterior tendríamos que llamar el objeto 
en cada ocasión que queramos ejecutar un método
*/

var dummy = new Dummy();
dummy.debug_nombre();
dummy.mostrar_nombre();
dummy.otro_valor('prueba');
dummy.otro_valor();

¿No se vería mejor el código si lo pudieramos escribir de esta manera?
Sin utilizar librerías como jQuery.

/*
Al encadenar los métodos, los podemos llamar uno después de otro. 
*/ 

dummy.debug_nombre().mostrar_nombre().otro_valor('prueba');

/*
En este caso, como son muchos métodos, se puede perder la legibilidad, 
podemos utilizar la siguiente sintaxis: 
*/

dummy.debug_nombre()
     .mostrar_nombre()
     .otro_valor('prueba')
     .otro_valor();

/*
Nota: 
El único ; - punto y coma - se incluye al final de la cadena.
Si se utiliza antes js interpreta que es el fin de la instrucción.
*/

Recordar

En JavaScript las funciones devuelven un valor, si no se especifica el valor se devuelve undefined.
Al utilizar – this – estamos haciendo referencia al objeto con el que estamos trabajando.
Para encadenar los métodos hay que devolver el objeto con el que estamos trabajando.

var Dummy = function () {
  this.nombre = 'dummy';
  this.debug_nombre = debug_nombre;
  this.mostrar_nombre = mostrar_nombre;
  this.otro_valor = otro_valor;

  function debug_nombre() {
    console.log("Soy: " + this.nombre);
    return this;
  };
  
  function mostrar_nombre () {
    alert("Soy: " + this.nombre);
    return this;
  };
  
  function otro_valor(param) {
    if (param !== undefined) {
      console.log("Otro:" + param);
    } else {
      console.log("Otro valor");      
    }
    return this;
  } 
}

De esta manera podemos usar nuestros métodos encadenados.

var Dummy = function () {
  this.nombre = 'dummy';
  this.debug_nombre = debug_nombre;
  this.mostrar_nombre = mostrar_nombre;
  this.otro_valor = otro_valor;

  function debug_nombre() {
    console.log("Soy: " + this.nombre);
    return this;
  };
  
  function mostrar_nombre () {
    alert("Soy: " + this.nombre);
    return this;
  };
  
  function otro_valor(param) {
    if (param !== undefined) {
      console.log("Otro:" + param);
    } else {
      console.log("Otro valor");      
    }
    return this;
  } 
}

var dummy = new Dummy();
dummy.debug_nombre()
     .mostrar_nombre()
     .otro_valor('prueba')
     .otro_valor();