Aprender los métodos call(), apply() y bind() es importante porque te permiten controlar el contexto de esto en JavaScript. En situaciones en las que este comportamiento predeterminado no funciona como se esperaba, como cuando se toman prestados métodos de un objeto a otro o se mantiene el contexto correcto dentro de las devoluciones de llamada, estos métodos brindan flexibilidad y control. Al dominarlos, podrás escribir funciones más eficientes, reutilizables y sensibles al contexto, lo cual es especialmente útil en aplicaciones complejas.

antes de pasar a los métodos call(), apply() y bind(), comprendamos "esta" palabra clave y su mecanismo.

Palabra clave 'esta'

Entendamos cuándo y a qué se refiere esta palabra clave mediante los siguientes puntos:

• En un método de objeto, esto se refiere al objeto. Dentro de un método definido dentro de un objeto, esto apuntará al objeto propietario del método.

• En una función normal, esto se refiere al objeto global. En modo no estricto, si se invoca una función en el contexto global (no como método de un objeto), esto se refiere al objeto global (ventana en los navegadores).

• En una función de modo estricto, esto no está definido. Si la función no es un método de un objeto y no está vinculada a un contexto específico (mediante llamada, aplicación o vinculación), no estará definida en modo estricto.

• En los controladores de eventos, esto se refiere al elemento que recibió el evento. Cuando se activa un evento, esto se refiere al elemento HTML que invocó el evento.
  

  
    Click to Remove Me!
  
  

  En este caso, esto se refiere al elemento del botón que recibió el evento onclick.

En funciones de flecha, esto se comporta de manera diferente. Las funciones de flecha no tienen su propio contexto. En cambio, esto se hereda léxicamente del ámbito circundante en el momento en que se crea la función de flecha. Esto significa que esto dentro de una función de flecha se referirá a este valor de su función o contexto circundante.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

En este caso, la función de flecha dentro de setTimeout hereda esto del método greet, que apunta al objeto persona.

método llamada()

El método call() te permite "tomar prestada" una función o método de un objeto y usarlo con otro objeto pasándolo como primer argumento. El primer argumento se convierte en el valor this dentro de la función y le siguen argumentos adicionales.

El método call() no crea una nueva función; ejecuta la función existente con el contexto y los argumentos proporcionados.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

En este ejemplo, call() se utiliza para ejecutar el método fullName de la persona con los datos de la persona1 (nombre y apellido), y los argumentos adicionales son "Oslo" y "Noruega".

aplicar() Método

El método apply() es muy similar al método call(). La principal diferencia radica en cómo se pasan los argumentos a la función. Con apply(), pasas los argumentos como una matriz (o un objeto similar a una matriz), en lugar de hacerlo individualmente.

Al igual que call(), el método apply() no crea una nueva función. Inmediatamente ejecuta la función con el contexto proporcionado (este valor) y los argumentos.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

En este ejemplo, apply() se usa para llamar al método fullName del objeto persona, pero con el contexto (this) de persona1. Los argumentos "Oslo" y "Noruega" se pasan como una matriz.

método enlazar()

El método bind() en JavaScript te permite establecer el contexto (este valor) para una función o método, al igual que call() y apply(). Sin embargo, a diferencia de call() y apply(), el método bind() no invoca inmediatamente la función. En su lugar, devuelve una nueva función con este valor establecido en el objeto que especifique.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

En este ejemplo, bind() crea una nueva función con este valor establecido en persona1. La función no se llama de inmediato, pero puedes invocarla más tarde, pasando los argumentos "Oslo" y "Noruega".

Ejemplo: registrador centralizado con múltiples contextos

Aquí hay un ejemplo de aplicación pequeño pero complejo donde el uso de call(), apply() o bind() aporta eficiencia, especialmente en el manejo de aplicación parcial de funciones con fines de registro:

Supongamos que tiene una función de registro centralizada que registra información sobre diferentes usuarios que realizan acciones. El uso de bind() le permite configurar este contexto para diferentes usuarios de manera eficiente, evitando código repetitivo.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

Por qué es eficiente:

Reutilización del contexto: No es necesario pasar manualmente el contexto del usuario cada vez que registra una acción. El contexto (este) se vincula una vez y el registro se vuelve reutilizable y limpio.

Modularidad: Si necesita agregar más usuarios o acciones, puede vincularlos rápidamente al registrador sin alterar la función en sí, manteniendo su código SECO (No se repita).