📅 Mié, 4 Dic 2024 ⏲️ ~ 5 minutos Avanzado

Cómo funciona Call, Apply y Bind en JavaScript

Cuando trabajamos con JavaScript, es frecuente encontrarse con situaciones en las que necesitamos controlar el valor de this.

Aquí es donde entran en juego los métodos call(), apply() y bind(). Estos métodos nos permiten establecer explícitamente el contexto de this para una función

Método	Descripción	Ejecución
`call`	Ejecutar una función de inmediato con un contexto específico.	Inmediata
`apply`	Similar a `call`, pero cuando los argumentos están en un array.	Inmediata
`bind`	Para crear una nueva función con un contexto fijo.	No inmediata

Estos métodos son muy útiles cuando queremos asegurarnos de que this apunte al objeto correcto, sin importar cómo se invoque la función (y que no se “pierda”).

Método call()

El método call() permite llamar una función con un valor específico de this y pasarle los argumentos uno por uno.

La sintaxis de de call() es la siguiente

functionName.call(thisArg, arg1, arg2, ...);

thisArg: El objeto que deseas asociar a this cuando se ejecute la función. Esto define el contexto.
arg1, arg2, …: Los argumentos que se pasan a la función, listados uno por uno.

Vamos a verlo con un ejemplo,

function saludar(saludo) {  
  console.log(`${saludo}, soy ${this.nombre}`);  
}  

const persona = { nombre: "Luis" };  

saludar.call(persona, "Hola");  // Salida: "Hola, soy Luis"

La función saludar no tiene su propio objeto this.
Usamos call() para establecer el valor de this como el objeto persona.
Pasamos el argumento "Hola" directamente como un parámetro.

## Método apply()

El método apply() funciona de manera similar a call(), pero los argumentos se pasan como un array o lista.

La sintaxis de apply() es

functionName.apply(thisArg, [arg1, arg2, ...]);

thisArg: Igual que en call(), es el valor que se asignará a this.
[arg1, arg2, …]: Un array o un objeto iterable que contiene los argumentos para la función.

Que si lo vemos con un ejemplo podría ser,

function presentar(nombre, edad) {  
  console.log(`Me llamo ${nombre} y tengo ${edad} años. Soy ${this.profesion}`);  
}  

const contexto = { profesion: "desarrollador" };  

presentar.apply(contexto, ["Luis", 30]);  
// Salida: "Me llamo Luis y tengo 30 años. Soy desarrollador"

apply() es útil cuando tienes los argumentos almacenados en un array o necesitas pasarlos dinámicamente.

## Método bind()

A diferencia de call() y apply(), el método bind() no ejecuta la función inmediatamente.

En su lugar, devuelve una nueva función con el valor de this vinculado al contexto especificado.

La sintaxis básica del método .bind() es la siguiente:

functionName.bind(thisArg[, arg1[, arg2[, ...]]]);

thisArg: El valor que se desea asociar a this cuando la función se ejecute. Esto define el contexto de la función.
arg1, arg2, ... (opcional): Argumentos que se pasan antes de los argumentos que la función original tomaría.

const persona = {  
  nombre: "Luis",  
  saludar: function() {  
    console.log(`Hola, soy ${this.nombre}`);  
  }  
};  

const saludo = persona.saludar.bind(persona);  
saludo();  // Salida: "Hola, soy Luis"

Vamos a verlo con un ejemplo. bind() es útil para asegurar que this se mantenga fijo, incluso cuando la función se utiliza en otros contextos.

const objeto = {
    nombre: "Luis",
    saludar: function() {
        console.log(`Hola, mi nombre es ${this.nombre}`);
    }
};

const saludarLuis = objeto.saludar.bind(objeto);
saludarLuis(); // "Hola, mi nombre es Luis"

En este ejemplo,

Al usar bind, creamos una nueva función saludarLuis que siempre tendrá this apuntando al objeto objeto.
Esto garantiza que, al invocarla, el método saludar acceda correctamente a la propiedad nombre.

Ejemplos prácticos

En la programación orientada a objetos en JavaScript, las clases pueden heredar métodos de sus clases base. Sin embargo, a veces necesitamos que un método de una clase base utilice el contexto de una clase derivada. Aquí es donde .bind() resulta útil.

class Animal {
    constructor(nombre) {
        this.nombre = nombre;
    }

    hablar() {
        console.log(`${this.nombre} hace un sonido.`);
    }
}

class Perro extends Animal {
    constructor(nombre) {
        super(nombre);
        this.hablar = this.hablar.bind(this);  // Aseguramos que `this` se refiere al objeto perro
    }
}

const miPerro = new Perro('Rex');
setTimeout(miPerro.hablar, 1000);  // `this` dentro de `hablar` se refiere a `miPerro`

En este ejemplo, this.hablar = this.hablar.bind(this) asegura que el método hablar de la clase Perro se ejecute con el contexto adecuado cuando se invoca desde fuera de la clase (como en un setTimeout).

El uso de .bind() también facilita la creación de funciones parciales, donde se fija parcialmente la información de los parámetros.

Esto es útil cuando necesitamos crear versiones especializadas de una función, donde algunos argumentos ya están predefinidos.

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

const sumarCinco = sumar.bind(null, 5);  // Creamos una nueva función que suma 5 a cualquier número

console.log(sumarCinco(10));  // 15

bind es especialmente útil en situaciones donde se pasan funciones como callbacks. Aquí hay un ejemplo con un evento:

const boton = document.createElement('button');
boton.textContent = "Haz clic en mí";

const objeto = {
    nombre: "Luis",
    saludar: function() {
        console.log(`Hola, soy ${this.nombre}`);
    }
};

// Al usar bind, `this` se refiere siempre a `objeto`
boton.addEventListener('click', objeto.saludar.bind(objeto));
document.body.appendChild(boton);

En este caso, cuando el botón es clicado, this dentro del método saludar seguirá apuntando a objeto, lo que evita que se pierda el contexto.

Estos ejemplos muestran cómo funciona Call, Apply y Bind. No significa que siempre sean la mejor forma de resolver todos los problemas; en algunos casos, puede haber soluciones más adecuadas.

Método call()

## Método apply()

## Método bind()

Ejemplos prácticos

En el contexto de la herencia

Funciones parciales

Callbacks