tutz

¿Cuál es la diferencia entre Call, Apply y Bind en JavaScript?

Vamos a explicar cuáles son las diferencias a partir de algunos ejemplos que vamos a revisar.

const luna = { name: 'Luna', age: 3 };
const tobi = { name: 'Tobi', age: 5 };

function generateDescription(color, town) {
  return `Hola, soy ${this.name}, tengo ${this.age} años. Soy de color ${color} y actualmente vivo en ${town}.`;
}

Call

El método call() invoca a una función con el valor de this y argumentos pasados uno por uno.

generateDescription.call(luna, 'blanco', 'Cartagena');
// Hola, soy Luna, tengo 3 años. Soy de color blanco y actualmente vivo en Cartagena.
generateDescription.call(tobi, 'gris', 'Trujillo');
// Hola, soy Tobi, tengo 5 años. Soy de color gris y actualmente vivo en Trujillo.

Como puedes ver en el ejemplo a la función le estamos pasando cuál será el this, en este caso el objeto y después los argumentos que recibe la función.

Apply

El método apply invoca a la función con el valor de this y le pasamos los argumentos de la función dentro de un array.

generateDescription.apply(luna, ['blanco', 'Cartagena']);
// Hola, soy Luna, tengo 3 años. Soy de color blanco y actualmente vivo en Cartagena.
generateDescription.apply(tobi, ['gris', 'Trujillo']);
// Hola, soy Tobi, tengo 5 años. Soy de color gris y actualmente vivo en Trujillo.

Como ves, es muy parecido a call(), la única diferencia es que en la primera pasamos los argumentos uno por uno, mientras que en la última pasamos un array.

Bind

Este método retorna una nueva función, que luego le podemos pasar cualquier cantidad de argumentos.

const generateDescriptionLuna = generateDescription.bind(luna);
const generateDescriptionTobi = generateDescription.bind(tobi);

generateDescriptionLuna('blanco', 'Cartagena');
// Hola, soy Luna, tengo 3 años. Soy de color blanco y actualmente vivo en Cartagena.
generateDescriptionTobi('gris', 'Trujillo');
// Hola, soy Tobi, tengo 5 años. Soy de color gris y actualmente vivo en Trujillo.

Te toca darte cuenta cuando necesitas una u otra según lo que quieras lograr.