This e Bind em Java Script

Se você está aprendendo JavaScript, provavelmente já se deparou com a palavra-chave this. Compreender como ela funciona, juntamente com o método bind(), é crucial para evitar armadilhas comuns e escrever código mais eficiente. Neste post, vamos explorar o que é This e Bind em Java Script, como eles funcionam em diferentes contextos e como podem ajudar a controlar seus comportamentos.

O que é this?

A palavra-chave this refere-se ao contexto de execução de uma função. O valor de this pode mudar dependendo de como uma função é chamada. Aqui estão alguns exemplos para ilustrar:

No contexto global

Quando você usa this no contexto global, ele se refere ao objeto global. No navegador, o objeto global é o window.

console.log(this); // No navegador, isso se refere ao objeto window

Dentro de uma função

Dentro de uma função regular, this se refere ao objeto global, a menos que a função seja chamada como um método de um objeto.

function mostrarThis() {
    console.log(this);
}

mostrarThis(); // No navegador, isso ainda se refere ao objeto window

Como método de um objeto

Quando uma função é chamada como um método de um objeto, this se refere ao objeto que está chamando o método.

const pessoa = {
    nome: "João",
    apresentar: function() {
        console.log(`Olá, meu nome é ${this.nome}`);
    }
};

pessoa.apresentar(); // Saída: Olá, meu nome é João

Em funções de flecha

As funções de flecha não têm seu próprio this. Elas herdam o valor de this do contexto em que foram definidas.

const pessoa = {
    nome: "Maria",
    apresentar: function() {
        const mostrar = () => {
            console.log(`Olá, meu nome é ${this.nome}`);
        };
        mostrar();
    }
};

pessoa.apresentar(); // Saída: Olá, meu nome é Maria

O que é bind?

O método bind() é usado para criar uma nova função que, quando chamada, tem seu this definido para um valor específico. Isso é útil quando você precisa garantir que uma função tenha um contexto específico, independentemente de como ela é chamada.

Exemplo de uso do bind:

const pessoa = {
    nome: "Carlos",
    apresentar: function() {
        console.log(`Olá, meu nome é ${this.nome}`);
    }
};

const apresentarCarlos = pessoa.apresentar.bind(pessoa);
apresentarCarlos(); // Saída: Olá, meu nome é Carlos

Alterando o contexto

Além de definir this, você também pode usar bind() para alterar o contexto de funções passadas como callbacks.

Exemplo:

function cumprimentar() {
    console.log(`Oi, eu sou ${this.nome}`);
}

const usuario = { nome: "Ana" };
const cumprimentarAna = cumprimentar.bind(usuario);
cumprimentarAna(); // Saída: Oi, eu sou Ana

Outros exemplos práticos

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.

Compreender como this funciona em JavaScript e como usar o método bind() pode ajudá-lo a evitar confusões e bugs em seu código.

O this é um conceito fundamental que varia de acordo com o contexto, enquanto o bind() é uma ferramenta poderosa para garantir que você tenha controle sobre o que this representa em suas funções.

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

Tags: bind this javascript