Entender los métodos bind(), call() y apply() en javascript

bind()

El objeto car guarda los datos de un coche y dispone de un método que devuelve, concatenados, la marca y modelo del mismo:

let car = {
  mark: "VOLVO",
  model: "XC60",
  getNameCar: function () {
    let carIdentification = this.mark + " " + this.model;
    return carIdentification;
  },
};

La siguiente función imprime por consola los datos del coche:

let logData = function (color) {
  console.log("Car data: " + this.getNameCar());
  console.log("Car color: " + color);
};

Al invocar esta función se generará un error:

logData(); // Error: this.getNameCar is not a function

Esto es debido a que la función logData() no tiene un método llamado getNameCar().
Para que funcione es necesario vincular la función con el objeto de esta forma:

// Vincular la función con el objeto
let logDataCar = logData.bind(car);

El objeto pasado como argumento a bind() es a quien apunta this cuando se ejecuta la función.

La función bind() devuelve una nueva función. Crea una copia de logData().

Al invocar esta función se obtendrá el valor esperado, pues this es car:

logDataCar("blanco"); //Car data: VOLVO XC60 // Car color: blanco

call()

Es similar a bind(), pero no crea copia de la función, sino que la invoca inmediatamente. Le pasa el this al llamar a la función:

logData.call(car); //Car data: VOLVO XC60

logData.call(car, "blanco"); //Car data: VOLVO XC60 //Car color: blanco

apply()

Idéntico a call(), pero los argumentos se pasan como un array.

logData.apply(car, "blanco"); //Car data: VOLVO XC60 //Car color: blanco