El método bind() en JavaScript

Siempre que llamamos a una función en JavaScript, la referencia de la función siempre apuntará al objeto global, es decir, al objeto de ventana. Esto está bien para las funciones normales, pero cuando se trata de funciones anidadas o las funciones presentes dentro de un objeto, esto crea un problema. Porque aquí, para llamar a las funciones internas, debe usar el nombre del objeto o el nombre de la función externa para llamar a la función interna. Entonces, si desea usar una función que está presente dentro de un objeto o presente dentro de alguna otra función, no puede hacerlo directamente, ya que apuntará a un contexto global.

Para resolver esto, puede vincular la función interna y pasar el nuevo contexto dentro de la función de vinculación o declarar esa función fuera y luego vincular la función y pasar el nuevo contexto. El bind() es una función en JavaScript que le permitirá cambiar el contexto global con algún otro contexto donde reside la función. Esto también se conoce como préstamo de funciones. Entendamos que el método de vinculación se usa en la práctica con un ejemplo.

Usando el método bind() en JavaScript

En el siguiente código, tenemos dos objetos, amazon y tesla. Cada uno de estos objetos contiene algunas propiedades como name, noOfEmployees y una función getInfo(). Aquí, llamamos a la función getInfo(), que está presente dentro del objeto amazon con la ayuda del nombre del objeto amazon, y dentro del objeto tesla con la ayuda del nombre del objeto tesla.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} amazon.getInfo();


let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} tesla.getInfo();

Producción :

The Amazon has 100 employees.
The Tesla has 150 employees.

Si ejecuta el programa anterior, obtendrá el resultado anterior. El problema con este enfoque es que la función getInfo() hace lo mismo que imprimir una línea en la consola. Además, hemos declarado la misma función en ambos objetos que conduce a la repetición del código.

En cambio, lo que podemos hacer es declarar la función getInfo() fuera del objeto y eliminarla de los objetos como se muestra a continuación.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
}

let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
}

let getInfo =
    function() {
  console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
}

let amazon_Data = getInfo.bind(amazon);
let tesla_Data = getInfo.bind(tesla);

amazon_Data();
tesla_Data();

Producción :

The Amazon has 100 employees.
The Tesla has 150 employees.

Luego vincule la función getInfo() con los dos objetos amazon y tesla usando la función bind(). Y luego almacene la referencia dentro de otros varios amazon_Data y tesla_Data.

Ahora para llamar a las funciones que ha almacenado dentro de amazon_Data y tesla_Data, debe poner un () entre paréntesis. Esto le dará el mismo resultado que obtuvimos anteriormente. La única diferencia aquí es que el enfoque que seguimos.

También puede llamar directamente al método sin almacenar la referencia agregando un () más al final del método de vinculación, como se muestra a continuación.

getInfo.bind(amazon)();
getInfo.bind(tesla)();

Este concepto también se conoce como función de préstamo porque la misma función getInfo() está siendo utilizada o prestada por dos objetos diferentes, amazon y tesla.