JavaScript call vs apply vs bind

En JavaScript, hay tres métodos para manipular el valor de `this` dentro de una función: `call`, `apply` y `bind`. Estos métodos se utilizan para establecer el valor de `this` cuando se llama a una función. Cada método se utiliza de manera ligeramente diferente y es importante comprender la diferencia entre ellos para saber cuándo usar cada uno.

¿Qué es la función call en JavaScript?

El método `call` se utiliza para invocar una función, pero también se utiliza para establecer explícitamente el valor de `this`. La función `call` acepta uno o más argumentos y cada argumento se pasa a la función como un parámetro separado por coma.

Por ejemplo, si tenemos una función `sumar` que suma dos números y queremos establecer el valor de `this` en un objeto específico, podemos hacerlo de la siguiente manera:

function sumar(a, b) {
return this.valor + a + b;
}

console.log(sumar.call(objeto, 5, 2)); // output: 17

En este ejemplo, hemos establecido el valor de `this` en el objeto `objeto` utilizando el método `call`. La función `sumar` suma los dos números que se le pasan como parámetros y devuelve el resultado.

¿Qué es la función apply en JavaScript?

El método `apply` es similar al método `call`, pero acepta un solo argumento que debe ser un arreglo o un objeto similar a un arreglo. Este argumento se pasa como una lista de parámetros a la función.

Por ejemplo, si tenemos la misma función `sumar` y queremos establecer el valor de `this` en un objeto específico, pero tenemos los parámetros en un arreglo, podemos hacerlo de la siguiente manera:

function sumar(a, b) {
return this.valor + a + b;
}

console.log(sumar.apply(objeto, parametros)); // output: 17

En este ejemplo, hemos establecido el valor de `this` en el objeto `objeto` utilizando el método `apply`. Los parámetros se encuentran en el arreglo `parametros`.

¿Qué es la función bind en JavaScript?

El método `bind` se utiliza para crear una nueva función con un valor de `this` determinado. En lugar de invocar la función inmediatamente como lo hacen `call` y `apply`, `bind` devuelve una nueva función que podemos llamar más tarde.

Por ejemplo, si tenemos una función `saludar` que acepta un nombre como parámetro y queremos crear una nueva función que siempre salude a una persona específica, podemos hacer lo siguiente:

function saludar(nombre) {
console.log(`Hola, ${nombre}`);
}

saludarAPersona(); // output: Hola, Juan

En este ejemplo, hemos creado una nueva función `saludarAPersona` que siempre saluda a la persona `Juan`. Hemos utilizado `bind` para establecer el valor de `this` en el objeto `persona`.

Ejemplos de cómo utilizar call, apply y bind

• Podemos utilizar `call` para invocar una función con un objeto específico:
  
  function mostrarInformacion() {
  console.log(`${this.nombre} tiene ${this.edad} años.`);
  }

  const persona = {nombre: "Juan", edad: 30};

  mostrarInformacion.call(persona); // output: Juan tiene 30 años.


• Podemos utilizar `apply` cuando tenemos los parámetros en un arreglo:
  
  function sumar(a, b, c) {
  return a + b + c;
  }

  const numeros = [2, 4, 6];

  console.log(sumar.apply(null, numeros)); // output: 12


• Podemos utilizar `bind` para crear una función con un valor de `this` específico que podemos llamar más tarde:
  
  function multiplicar(a, b) {
  return a * b * this.valor;
  }

  const objeto = {valor: 2};
  const multiplicarPorDos = multiplicar.bind(objeto, 2);

  console.log(multiplicarPorDos(5)); // output: 20


Conclusión

`call`, `apply` y `bind` son métodos para manipular el valor de `this` dentro de una función en JavaScript. Cada uno se utiliza de manera diferente y es importante comprender las diferencias para saber cuándo utilizar cada uno.

Si necesitas invocar una función inmediatamente con un valor específico de `this`, utiliza `call` o `apply`. Si necesitas crear una nueva función con un valor de `this` específico, utiliza `bind`.

Preguntas frecuentes

¿Puedo utilizar estos métodos con funciones flecha?

No, las funciones flecha no tienen sus propios valores de `this`, por lo que estas técnicas no se aplican a ellas.

¿Qué valor debo pasar como el primer argumento de `call` y `apply` si no necesito establecer un valor específico de `this`?

Puedes pasar `null` o `undefined` como el primer argumento.

¿Puedo encadenar el método `bind` varias veces?

Sí, puedes encadenar el método `bind` varias veces.

¿Puedo utilizar `bind` para pasar parámetros a una función?

Sí, puedes utilizar `bind` para establecer valores predeterminados para los parámetros de una función.
[nekopost slugs="matriz-dentro-de-un-objeto-javascript,reemplace-el-objeto-en-la-matriz-en-javascript,verifique-si-el-tipo-es-booleano-usando-javascript,rastrear-la-posicion-del-mouse-javascript,javascript-no-operador-de-comparacion-igual,obtener-el-texto-interno-html-elements-jquery,unirse-a-las-cuerdas-no-vacias-con-un-separador-en-javascript,ejemplos-de-registro-de-consola-javascript,metodo-de-reemplazo-de-cadena-en-javascript-explicado"]