Nessa thread, você aprenderá:
✅ O que é o bind();
✅ Qual é a relação dele com o this;
✅ Como ele pode ser útil para você.
Vem comigo! 👇
✅ O que é o bind();
✅ Qual é a relação dele com o this;
✅ Como ele pode ser útil para você.
Vem comigo! 👇
Na thread passada (link nos últimos tweets), você aprendeu que o `this`:
1️⃣ Por default, referencia o objeto global do ambiente em que é executado;
1️⃣ Por default, referencia o objeto global do ambiente em que é executado;
2️⃣ Dentro de um método, referencia o próprio objeto no qual ele foi declarado;
A partir daqui, irei mostrar o código no console do browser, para que você code comigo sem ter que levantar um server.
Vamos criar uma função "showThis", que apenas retornará o `this`:
Vamos criar uma função "showThis", que apenas retornará o `this`:
Como você já sabe, se invocarmos "showThis", ela retornará o objeto global window, afinal:
🔸 Estamos executando código no browser;
🔸 A invocação da função não está ligada à propriedade de um objeto (não é um método, apenas uma função);
🔸 E o contexto de execução de uma função é, por padrão, o global.
🔸 A invocação da função não está ligada à propriedade de um objeto (não é um método, apenas uma função);
🔸 E o contexto de execução de uma função é, por padrão, o global.
Agora, vamos limpar o console e criar uma nova função utilizando o bind().
Para fazer isso, vamos declarar uma const "showMySelectedThis".
Para fazer isso, vamos declarar uma const "showMySelectedThis".
A "showMySelectedThis" armazenará a referência da função "showThis" + o encadeamento da execução do método bind(). Não pressione "enter" ainda.
Até aqui, nossa const está assim, certo?
Até aqui, nossa const está assim, certo?
Agora, podemos passar um argumento para a invocação do bind().
O objeto que você passar como argumento do bind(), será o valor do this dessa nova função.
Vamos passar um objeto vazio como argumento da invocação do bind() e pressionar "enter".
O objeto que você passar como argumento do bind(), será o valor do this dessa nova função.
Vamos passar um objeto vazio como argumento da invocação do bind() e pressionar "enter".
Se você invocar "showMySelectedThis", um objeto vazio é retornado:
E se você invocar "showThis", window continua sendo retornado.
Ou seja, quando invocamos showThis.bind({}), criamos uma cópia da função "showThis" e setamos o this dessa nova função como o objeto vazio que passamos como argumento do bind().
Vamos a outro exemplo. Desta vez, vamos entender como o bind() pode ser utilizado na composição de objetos e reutilização de funções em JavaScript.
Vamos limpar o console e declarar 2 novos objetos, "xena" e "sherlock".
Vamos limpar o console e declarar 2 novos objetos, "xena" e "sherlock".
Esses 2 objetos terão a propriedade "name", com o nome completo de cada um:
Agora, imagine que queremos criar uma função que retorne o valor da propriedade "name" de qualquer um desses objetos.
Vamos declarar uma função "getName", que retornará this.name:
Vamos declarar uma função "getName", que retornará this.name:
Se invocarmos "getName", veremos que uma string vazia é retornada:
Ou seja, o this da função (window) possui uma propriedade "name", que está retornando uma string vazia:
Através do bind, podemos fazer com que o this da cópia da função "getName" referencie qualquer um dos 2 objetos que criamos.
Se referenciarmos "getName" e encadearmos a invocação do bind(), passando um dos 2 objetos como argumento, comprovaremos que uma nova função é retornada:
Só que o this dessa nova função retornada, é o objeto que passamos como argumento.
Podemos comprovar isso invocando a função:
Podemos comprovar isso invocando a função:
O mesmo acontece com o objeto "sherlock":
Em ambos os casos, o valor da propriedade "this.name" é retornado, mas temos o poder de "vincular" a função à objetos diferentes.
Acha que esse conteúdo pode ajudar + pessoas❓
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Baixe meu eBook gratuito e com exercícios 👇
Thread sobre o this:
