This e Bind em Java Script

A palavra-chave this aponta para o contexto onde uma função está sendo executada. Neste post veja This e Bind em Java Script.

O valor dentro de uma função depende de como a função foi invocada. Em uma mesma função, this pode ter diferentes valores, em diferentes momentos, dependendo da invocação:

const pessoa = {
  mensagem: 'Boa tarde!',
  falar() {
     console.log(this.mensagem) //this acessa 'mensagem' do objeto 'pessoa' o qual é o dono desta função 'falar()'
  }
} 

pessoa.falar()

Se armazenarmos a função ‘falar’ em uma variável, será gerado um erro:

const pessoa = {
  mensagem: 'Boa tarde!',
  falar() {
     console.log(this.mensagem)
  }
} 
pessoa.falar()

/*
Neste contexto, 'mensagem' está apontando para um this diferente, que não é mais do 
objeto 'pessoa', e o objeto que está sendo apontado a partir da função 'falar()' abaixo
não tem 'mensagem' dentro dele: */

const falar = pessoa.falar
falar()

Para resolver o problema acima utilizamos a função bind():

 ...

 const falar = pessoa.falar
 falar()
 
 /*
 Passamos um objeto a função bind o qual você deseja que seja resolvido o this, 
 ou seja, o objeto no qual o this precisa referenciar: */
 
 const falarDePessoa = pessoa.falar.bind(pessoa)
 falarDePessoa() 

Bind “amarra” um determinado objeto para que este seja o dono da execução do método sempre que ele for chamado, ou seja, quando a função falarDePessoa() for chamada, sempre quando você se referenciar ao this este será do objeto que você passou para a função bind().

O objetivo principal do método bind é alterar o contexto de this de uma função independente de onde a mesma esteja sendo chamada.

Variáveis e tipos de dados em Java Script

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits