Lección 32: call, apply y bind

🧠 Concepto

call(), apply() y bind() son métodos que permiten controlar explícitamente el valor de this en una función.

call()

Invoca la función inmediatamente con un this específico. Los argumentos se pasan de forma individual:

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

const persona = { nombre: 'Ana' };
saludar.call(persona, 'Hola', '!'); // "Hola, soy Ana!"

apply()

Similar a call(), pero los argumentos se pasan como un array:

saludar.apply(persona, ['Hello', '!!']); // "Hello, soy Ana!!"

// Útil con Math.max
const numeros = [5, 12, 8, 20, 3];
const maximo = Math.max.apply(null, numeros);
console.log(maximo); // 20

// Ahora con spread es más común:
const maximoSpread = Math.max(...numeros);

bind()

No invoca la función inmediatamente. Crea una nueva función con this fijo permanentemente:

function presentarse() {
  console.log(`Me llamo ${this.nombre}`);
}

const ana = { nombre: 'Ana' };
const presentarAna = presentarse.bind(ana);
presentarAna(); // "Me llamo Ana"

💻 Ejemplo

// Partial application con bind (fijar argumentos)
function multiplicar(a, b) {
  return a * b;
}

const duplicar = multiplicar.bind(null, 2); // fija a=2
console.log(duplicar(5));  // 10
console.log(duplicar(10)); // 20

const triplicar = multiplicar.bind(null, 3);
console.log(triplicar(5)); // 15

// bind en event handlers
class Boton {
  constructor(texto) {
    this.texto = texto;
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(`Botón "${this.texto}" clickeado`);
  }
}

const btn = new Boton('Enviar');
boton.addEventListener('click', btn.handleClick); // Funciona gracias a bind

⚠️ Nota

bind() no modifica la función original, crea una copia. No se puede re-bindear una función ya boundeada:

function f() { console.log(this); }
const bound1 = f.bind({ a: 1 });
const bound2 = bound1.bind({ b: 2 }); // No funciona
bound2(); // { a: 1 } — el primer bind prevalece

🎯 Tip

Usa call cuando conozcas los argumentos de antemano. Usa apply cuando los argumentos estén en un array. Usa bind cuando necesites una función con this fijo para usar más tarde (callbacks, event handlers). En código moderno, muchas veces los arrow functions reemplazan a bind, pero bind es más explícito.

📝 Ejercicio

Crea un objeto restaurante con propiedades nombre y platillos (array). Crea una función ordenar que use this.platillos para mostrar el menú. Luego usa bind para crear una función ordenarEnRestaurante que siempre muestre el menú de ese restaurante.

const restaurante = {
  nombre: 'La italiana',
  platillos: ['Pizza', 'Pasta', 'Tiramisú']
};

function ordenar() {
  console.log(`Menú de ${this.nombre}: ${this.platillos.join(', ')}`);
}

// Crea ordenarEnRestaurante usando bind
const ordenarEnRestaurante = ordenar.bind(restaurante);
ordenarEnRestaurante(); // "Menú de La italiana: Pizza, Pasta, Tiramisú"