Entendendo o método bind do Javascript
O que é o método bind() no javascript?
Traduzindo literalmente do inglês, a palavra bind significa vincular, o que faz muito sentido. O método bind() permite que um objeto pegue um método de um segundo objeto para si. Durante esse processo a keyword this é substituída pelo argumento passado no método bind().
const cachorro = {
animal: 'cachorro',
latir: function () {
console.log(`O ${this.animal} faz: au!`);
},
};
const gato = {
animal: 'gato',
miar: function () {
console.log(`O ${this.animal} faz: miau!`);
},
};
const latir = cachorro.latir.bind(gato);
cachorro.latir(); //O cachorro faz: au!
gato.miar(); //O gato faz: miau!
latir(); //O gato faz: au!
Veja, no exemplo acima o que ocorreu: a constante latir recebeu o objeto cachorro vinculando o método latir com o objeto gato através do argumento do método bind(). Como houve a troca da keyword this da constante cachorro para a constante gato o retorno acaba sendo: O gato faz: au!
É importante mencionar que muitas vezes o método bind() é utilizado para preservar o this, isso é bastante efetivo quando utilizamos callbacks, por exemplo, onde a keyword this é perdida em sua utilização.
const cachorro = {
animal: 'cachorro',
latir: function () {
console.log(`O ${this.animal} faz: au!`);
},
};
const latir = cachorro.latir.bind(cachorro);
cachorro.latir(); //O cachorro faz: au!
setTimeout(cachorro.latir, 1000); //O undefined faz: au!
setTimeout(latir, 1000); //O cachorro faz: au!
Referências:
https://www.w3schools.com/js/js_function_bind.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind