Fala dev tudo bem?
Recentemente estou esbarrando no método bind() do JavaScript com frequentemente e então resolvi escrever um pequeno artigo para explorar o assunto em que este método está inserido, com o objetivo de compreendê-lo um pouco mais e de quebra ainda dar uma introdução a respeito dele a quem também esbarrar com ele por aí.
Bom, esse método foi por muito tempo um mistério para mim, às vezes quebrava a cabeça na tentativa de compreendê-lo e utilizá-lo corretamente, mas foi só quando fui estudar mais a fundo sobre a maneira que o JavaScript trabalha com a palavra mágica this que finalmente pude compreender melhor o seu funcionamento.
Em resumo, segundo a própria documentação do site MDN "O método bind() cria uma nova função que, quando chamada, tem sua palavra-chave this definida com o valor fornecido", ou seja, em outras palavras quer dizer que podemos, com o método bind(), alterar o escopo de execução da nossa função ou método.
Confuso? Então se liga só, imagina que no seu programa você definiu dois objetos e também uma função que exibe algo na tela através de um console.log():
const meuPrimeiroObjeto = {
texto: "texto do meu primeiro objeto"
}
const meuSegundoObjeto = {
texto: "texto do meu segundo objeto"
}
function MostraNaTela(){
console.log(this.texto);
}
Perceba que em console.log(this.texto) estamos usando a palavra "this", ela representa o contexto em que a nossa função vai procurar o valor de texto para atribuir ao parâmetro do console.
Mas o que acontece se eu tentar executar a função MostraNaTela agora? Vamos executar a função para ver o resultado:
MostraNaTela();
Se você executou a função como no exemplo acima você vai ver que ela irá imprimir no console o valor "undefined", o segredo aqui está na palavra "this", o que significa que a nossa função vai tentar imprimir o valor a propriedade texto no contexto em que a função MostraNaTela for chamada ou executada; neste caso nossa função está sendo executada no contexto (ou escopo) global do nosso programa, e no escopo global não existe uma propriedade chamada texto, por isso o resultado foi "undefined".
Hmmm... Mas ai então fica a pergunta: como eu digo para minha função que é para ela procurar pela propriedade texto dentro dos meus objetos e não fora? Bom... é aí que entra o "bind". Com ele podemos vincular o contexto/escopo em que a nossa função deve ser executada, olha só:
const noContextoDoPrimeiroObjeto = MostraNatela.bind(meuPrimeiroObjeto);
Hmmm... Mas por que preciso atribuir a uma variável? Simples, pois o método bind retorna "uma cópia da função fornecida com o valor de this especificado, ou seja, o escopo/contexto de execução da função e também os argumentos iniciais", nesse caso como nossa função não recebe parâmetros não vamos passá-los, precisamos de uma variavel para armazenar o retorno do método bind().
E como nossa variável agora armazena uma função podemos executá-la, fazendo o seguinte:
noContextoDoPrimeiroObjeto();
Ao executar a função será "pintado" no console a mensagem: "texto do meu primeiro objeto", ou seja, o valor da propriedade texto que está dentro do objeto "meuPrimeiroObjeto".
O que basicamente fizemos com o bind() foi dizer para nossa função em qual escopo/contexto ela devia executar! Se fizemos agora:
const noContextoDoPrimeiroObjeto = MostraNatela.bind(meuSegundoObjeto);
a mensagem impressa no console será: "texto do meu segundo objeto", ou seja, o valor da propriedade texto do objeto "meuSegundoObjeto".
Bom este foi apenas uma visão introdutória do método bind do JavaScript, com ele podemos de certa forma manipular o contexto/escopo em que as nossas funções e métodos são executados e ter controle sobre uma série de erros muito comuns causados por erros relacionados com o escopo.
Espero que tenha gostado do conteúdo e que eu tenha conseguido te dar uma introdução legal ao método bind() do JavaScript. Se você quiser se aprofundar mais sobre o método, recomendo que dê uma olhada no link de referência que utilizei para explicar melhor os conceitos. Aproveite!
Vlw Dev pela sua atenção e um forte abraço!!!
Referências:
Comentários (0)