O método bind() em JavaScript

Sempre que chamamos uma função em JavaScript, a referência da função sempre apontará para o objeto global, ou seja, o objeto de janela. Isso é bom para funções normais, mas quando se trata de funções aninhadas ou das funções presentes dentro de um objeto, isso cria um problema. Porque aqui, para chamar as funções internas, você deve usar o nome do objeto ou o nome da função externa para chamar a função interna. Então, se você quiser usar uma função que está presente dentro de um objeto ou dentro de alguma outra função, você não pode fazer isso diretamente, pois estará apontando para um contexto global.

Para resolver isso, você pode vincular a função interna e passar o novo contexto dentro da função de vinculação ou declarar essa função fora e então vincular a função e passar o novo contexto. O bind() é uma função em JavaScript que permite alterar o contexto global com algum outro contexto onde a função reside. Isso também é conhecido como empréstimo de função. Vamos entender que o método bind é usado na prática com um exemplo.

Usando o método bind() em JavaScript

No código abaixo, temos dois objetos, amazon e tesla. Cada um desses objetos contém algumas propriedades como name, noOfEmployees e uma função getInfo(). Aqui, chamamos a função getInfo(), que está presente dentro do objeto amazon com a ajuda do nome do objeto amazon, e dentro do objeto tesla com a ajuda do nome do 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();

Produção:

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

Se você executar o programa acima, obterá a saída acima. O problema com essa abordagem é que a função getInfo() faz a mesma coisa que imprimir uma linha no console. Além disso, declaramos a mesma função em ambos os objetos que leva à repetição do código.

Em vez disso, o que podemos fazer é declarar a função getInfo() fora do objeto e removê-la dos objetos como mostrado abaixo.

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();

Produção:

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

Em seguida, vincule a função getInfo() com os dois objetos amazon e tesla usando a função bind(). Em seguida, armazene a referência dentro de outros vários amazon_Data e tesla_Data.

Agora, para chamar as funções que você armazenou dentro de amazon_Data e tesla_Data, você deve colocar um () colchetes. Isso lhe dará a mesma saída que obtivemos anteriormente. A única diferença aqui é a abordagem que seguimos.

Você também pode chamar diretamente o método sem armazenar a referência, adicionando mais um () no final do método de vinculação, conforme mostrado abaixo.

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

Este conceito também é conhecido como empréstimo de função porque a mesma função getInfo() está sendo usada ou emprestada por dois objetos diferentes, amazon e tesla.