Aprendiendo lenguajes por código

Blog para geek y otras hierbas.

Inicio / Programacion / JavaScript / Comprender los métodos call, apply y bind en ECMAScript

Comprender los métodos call, apply y bind en ECMAScript

By on 0

Comprender los métodos call, apply y bind en ECMAScript

Vamos a intentar comprender los métodos call() ,  apply() y bind() de JavaScript.

Todas las funciones en la especificación ECMAScript tienen estos métodos intrínsecos o predeterminados estos métodos son call() ,  apply() y bind(). Ambos métodos nos permiten llamar a una función que no pertenece al ámbito de un objeto y hacer que se ejecute como si perteneciese al ámbito del objeto.

¿Qué?, ¿Cómo?, ¿Ámbito del objeto?

¡Vaya lio!

Tranquilos que paso a explicarlo con más detalle la funcionalidad correcta que se hace de estos métodos. Y como nada mejor para explicarlo que con código JavaScript.

Bien, como habíamos dicho que ambos métodos nos permiten llamar a una función fuera del ámbito de un objeto pues creemos una función en el scope o ámbito de Windows.

Antes de nada, para los que no tengan muy claro qué es un objeto en JavaScript sería esto:

var myObj = {
  person: 'Lector',
  description: 'para entender los métodos call(), apply() y bind() de JavaScript'
}  // Object

Bien pasemos a crear la función:

// Función que sirve para saludar.
function saludar(saludo){
  console.log(saludo); // Texto - Reusar saludo
  var respuesta = [ this.person,'está leyendo código JavaScript', this.description].join(' ');
  console.log(respuesta); 
}

Ahora ejecutamos los métodos apply y call

// Pasamos a ejecutar los métodos
/* 
  Método apply()
  Se usa un array para pasarles los parámetros
  Ejemplo: myFuncion.apply(myObjeto, ['param1','param2','param3', 'paramN']);
*/
saludar.apply(myObj, ['Reusar saludo']); 
/* 
  Método call()
  Se usa un String para pasarles los parámetros
  Ejemplo: myFuncion.apply(myObjeto, 'param1','param2','param3', 'paramN');
*/
saludar.call(myObj,'Reusar saludo');

Y el resultado sería algo como esto:

Reusar saludo
Lector está leyendo código JavaScript para entender los métodos call(), apply() y bind() de JavaScript
Reusar saludo
Lector está leyendo código JavaScript para entender los métodos call(), apply() y bind() de JavaScript

Ah, vale ! Voy entendiendo algo.. ¿Pero este ejemplo no es un poco chorra o de poco uso?

Pues si, vamos a intentar hacerlo con un ejemplo más al uso, ahora que hemos visto cómo se comportan los métodos apply y call de javascript.

Bien antes de nada hay que tener muy en cuenta la palabra clave this que hemos usado en nuestro objeto ya que hace referencia a la parte de la memoria donde esta nuestro myObj

La palabra this tienen mucha relación con el manejo de la referencia en memoria de los distintos contextos que usemos y los métodos apply, call y bind están muy relacionados con el uso del this sobre el contexto o objeto que usamos, es decir, se usan en conjunto para manejar la posición en memoria de objetos o funciones.

Bla bla bla, mucho texto pero aun no he visto la funcionalidad de todo esto.

¡ Ok, vamos a ver un ejemplo !

// Mi Objeto
const person = {
  name: 'Darth',
  lastname: 'Vader',
  fullname: function() {
    return this.name + ' ' + this.lastname;
  }
}

Ahora creamos la función a usar:

// Creamos nuestra function
const imprimeSaludo = function(textSaludo, textFinal) {
  console.log(textSaludo, this.fullname(), 'wellcome to', textFinal);
}
/* 
 * Observa aquí que 'this.fullname()' tiene el mismo nombre que
 * usamos en el objeto 'person'
 */

Si ahora intentamos ejecutar la función imprimeSaludo(‘Hi’,‘Dark side of the galaxy’); nos arrojará un error de tipo this.fullname() is not a function.

// Error - this.fullname() is not a function. ;P
imprimeSaludo('Hi','Dark side of the galaxy');

Esto es debido a que this dentro de la función imprimeSaludo apunta al contexto global y no al contexto de nuestro objeto.

Vale entiendo pero ¿cómo lo soluciono?

Vamos a ver la solución a este error común en el desarrollo javascript

// Solución
const imprimeSaludoEnContexto = imprimeSaludo.bind(person);
imprimeSaludoEnContexto('Hi', 'Dark side of the galaxy');

Ahora deberíamos de ver correctamente el saludo:

Hi Darth Vader wellcome to Dark side of the galaxy

Y para usar los métodos call y apply para este mismo ejemplo se usaría de esta forma:

// Usando los métodos call() y apply()
imprimeSaludo.call(person, 'Hi', 'Dark side of the galaxy');
imprimeSaludo.apply(person, ['Hi', 'Dark side of the galaxy']);
/*
 * Aquí debemos de observar que los parámetros pasados
 * al objeto 'person' tienen que ser pasado de distinta
 * forma para un método o para el otro.
 * En el método call() se usa un número de String separados por coma
 * En el método apply() se usa un array de String
 */

Conclusión

Hemos visto como el this dentro de una función apunta al objeto global y no a la propia función como objeto. Para solucionar esto JavaScript tiene estos tres métodos que toda function tiene implicitamente y resuelve los contexto a los que apuntan los objetos en JavaScript.

Francisco Payán
Últimas entradas de Francisco Payán (ver todo)