Nessa thread, você aprenderá:
✅ O que é o this;
✅ Como evitá-lo;
✅ Como ele se comporta na invocação de funções, métodos, classes e eventos.
Vem comigo! 👇
✅ O que é o this;
✅ Como evitá-lo;
✅ Como ele se comporta na invocação de funções, métodos, classes e eventos.
Vem comigo! 👇
Recentemente, fiz uma enquete para saber o que mais confunde as pessoas em JavaScript.
Eis o resultado:
Eis o resultado:
Eu espero que essa thread realmente te ajude a entender o this.
E recomendo fortemente que você não apenas leia, mas acompanhe codando.
Essa prática facilita que os conceitos explicados aqui sejam absorvidos, e não apenas compreendidos.
E recomendo fortemente que você não apenas leia, mas acompanhe codando.
Essa prática facilita que os conceitos explicados aqui sejam absorvidos, e não apenas compreendidos.
🔥 O que é o this
Em JavaScript, o this é um objeto implícito que referencia ou representa coisas diferentes dependendo de onde ele está ou da forma que ele é acessado.
Na maioria dos casos, o valor do this é determinado dependendo de como uma função é invocada.
Em JavaScript, o this é um objeto implícito que referencia ou representa coisas diferentes dependendo de onde ele está ou da forma que ele é acessado.
Na maioria dos casos, o valor do this é determinado dependendo de como uma função é invocada.
🔥 O this na invocação de funções
Ao invocar uma função, o contexto de execução dela é, por padrão, o global.
Se você estiver trabalhando com um código que é executado no browser, por exemplo, o this irá referenciar o objeto window. Tanto fora como dentro da função:
Ao invocar uma função, o contexto de execução dela é, por padrão, o global.
Se você estiver trabalhando com um código que é executado no browser, por exemplo, o this irá referenciar o objeto window. Tanto fora como dentro da função:
O que é o window?
De forma resumida, o window é o objeto que existe no escopo global de uma aplicação.
Em JavaScript, sempre existe um objeto global em que todos os objetos, métodos e propriedades que você utiliza estão "pendurados".
De forma resumida, o window é o objeto que existe no escopo global de uma aplicação.
Em JavaScript, sempre existe um objeto global em que todos os objetos, métodos e propriedades que você utiliza estão "pendurados".
E esse objeto varia de acordo com o ambiente em que a sua aplicação está sendo executada.
🔥 O this na invocação de funções, com o strict mode
Se o seu código possui a diretiva 'use strict', o this não irá referenciar o objeto global.
Nesse caso, ao invocar uma função, o contexto de execução dela é afetado, e o this se torna "undefined":
Se o seu código possui a diretiva 'use strict', o this não irá referenciar o objeto global.
Nesse caso, ao invocar uma função, o contexto de execução dela é afetado, e o this se torna "undefined":
O que é o strict mode?
De forma resumida, o strict mode era utilizado antigamente para facilitar a detecção de possíveis erros no código.
Então, se você trabalha com código legado, pode ser que você encontre-o em módulos de uma aplicação.
De forma resumida, o strict mode era utilizado antigamente para facilitar a detecção de possíveis erros no código.
Então, se você trabalha com código legado, pode ser que você encontre-o em módulos de uma aplicação.
🔥 O this na invocação de métodos
Quando uma função é atribuída à propriedade de um objeto, ela é um método.
Quando um método é invocado, o this desse método referencia o objeto no qual o método foi declarado.
Quando uma função é atribuída à propriedade de um objeto, ela é um método.
Quando um método é invocado, o this desse método referencia o objeto no qual o método foi declarado.
No código abaixo, quando object.getThis() é invocado, o this dentro do método "getThis" referencia o proprio objeto "object":
Se a invocação de object.getThis() retorna o próprio objeto "object", isso significa que você pode, por exemplo, acessar a propriedade "prop1" à partir dessa invocação:
Observe que neste exemplo anterior, a função/método foi declarada dentro do objeto.
No entanto, é possível declararmos a função após declararmos o objeto e só depois atribuirmos a função como um método do objeto.
O resultado é o mesmo:
No entanto, é possível declararmos a função após declararmos o objeto e só depois atribuirmos a função como um método do objeto.
O resultado é o mesmo:
🔥 O this dentro de classes ou funções construtoras
Classes e funções construtoras são invocadas com a palavra-chave new.
Neste caso, o this referencia o novo objeto que a classe ou a função construtora criou.
Classes e funções construtoras são invocadas com a palavra-chave new.
Neste caso, o this referencia o novo objeto que a classe ou a função construtora criou.
No código abaixo, o this das propriedades "this.name" e "this.author" é utilizado para adicionar as propriedades name e author ao novo objeto criado:
Por baixo dos panos, o que está acontecendo é:
1️⃣ this é um novo objeto implícito dentro da função/classe;
2️⃣ this é retornado de forma implícita após a declaração das propriedades.
1️⃣ this é um novo objeto implícito dentro da função/classe;
2️⃣ this é retornado de forma implícita após a declaração das propriedades.
🔥 O this dentro de arrow functions
Perceba que até aqui, apenas exemplos com a keyword "function" foram utilizados.
Em arrow functions, o this representa o this do escopo em que a arrow function foi declarada.
Perceba que até aqui, apenas exemplos com a keyword "function" foram utilizados.
Em arrow functions, o this representa o this do escopo em que a arrow function foi declarada.
Para entendermos isso, vamos declarar uma classe "MyClass" que construirá um objeto com uma propriedade "prop1".
Após a declaração da classe, vamos instanciar um objeto e armazená-lo na const "myObj":
Após a declaração da classe, vamos instanciar um objeto e armazená-lo na const "myObj":
Agora, vamos declarar um método "isThisEqualMyObj", dentro da classe.
A 1ª linha do "isThisEqualMyObj" irá apenas exibir no console se o this está referenciando o objeto "myObj" que instanciamos.
Se executarmos myObj.isThisEqualMyObj(), o retorno será "true":
A 1ª linha do "isThisEqualMyObj" irá apenas exibir no console se o this está referenciando o objeto "myObj" que instanciamos.
Se executarmos myObj.isThisEqualMyObj(), o retorno será "true":
Nada de novo até aqui. Já sabíamos que o this, dentro de uma classe, representa o objeto que foi criado, certo?
Agora, dentro do método "isThisEqualMyObj", vamos executar um "setTimeout", que executará uma arrow function após 1 segundo:
Agora, dentro do método "isThisEqualMyObj", vamos executar um "setTimeout", que executará uma arrow function após 1 segundo:
Dentro da arrow function, também vamos exibir no console se o this continua referenciando "myObj":
E sim, o this da arrow function representa o objeto que criamos. Por que?
Por que o this dentro da arrow function representa o this do escopo em que a arrow function foi declarada.
Por que o this dentro da arrow function representa o this do escopo em que a arrow function foi declarada.
E o this do escopo em que a arrow function foi declarada é o novo objeto que criamos com a classe.
Ou seja, a arrow function "herda" o contexto no qual ela foi declarada.
Ou seja, a arrow function "herda" o contexto no qual ela foi declarada.
🔥 Cuidados ao declarar métodos utilizando arrow functions
Vamos declarar uma funcão construtora "MyConstructor".
Vamos declarar uma funcão construtora "MyConstructor".
A "MyConstructor" receberá apenas um parâmetro "propValue" e, dentro dela, iremos construir um objeto que possuirá a propriedade "myProp", que receberá o parâmetro "propValue":
E também vamos declarar uma const "myObj", que receberá a invocação do new, seguido da invocação função construtora, que receberá a string "A string" como argumento:
Agora, antes da const, vamos adicionar um método ao prototype da "MyConstructor".
Ele se chamará "getMyProp" e receberá uma arrow function.
Dentro da arrow function, vamos exibir o this no console e retornar this.myProp.
Ele se chamará "getMyProp" e receberá uma arrow function.
Dentro da arrow function, vamos exibir o this no console e retornar this.myProp.
E logo após a declaração do "myObj", vamos invocar o método "getMyProp", que agora está disponível no prototype do "myObj".
Observe os resultados:
Observe os resultados:
Desta vez, o this dentro da arrow function não está referenciando "myObj". Por que?
Mesmo que "getMyProp" seja executado como um método do objeto "myObj", "getMyProp" é uma arrow function que foi definida no escopo global. Por isso, o this referencia o objeto window.
Mesmo que "getMyProp" seja executado como um método do objeto "myObj", "getMyProp" é uma arrow function que foi definida no escopo global. Por isso, o this referencia o objeto window.
E como a propriedade "myProp" não existe no window, myObj.getMyProp() retorna undefined.
Para que o this do "getMyProp" realmente referencie o "myObj", é necessário que "getMyProp" seja uma função tradicional.
Para que o this do "getMyProp" realmente referencie o "myObj", é necessário que "getMyProp" seja uma função tradicional.
Ao contrário de uma arrow function, uma função tradicional modifica o contexto dela dependendo da invocação:
O mesmo cuidado vale para métodos declarados dentro do próprio objeto:
🔥 O this em eventos do DOM
Quando uma função é utilizada como um event handler, o this dela referencia o elemento no qual o evento será disparado.
No código abaixo, ao clicarmos no "button", o this dentro da função "logThis" irá referenciar o próprio botão:
Quando uma função é utilizada como um event handler, o this dela referencia o elemento no qual o evento será disparado.
No código abaixo, ao clicarmos no "button", o this dentro da função "logThis" irá referenciar o próprio botão:
🔥 Como evitar o this
Como você percebeu, o this é imprevisível e pode facilmente modificar a referência para a qual ele aponta.
Existem, pelo-menos, duas formas de evitá-lo:
1️⃣ Utilize factory functions ao invés de classes ou funções construtoras
Como você percebeu, o this é imprevisível e pode facilmente modificar a referência para a qual ele aponta.
Existem, pelo-menos, duas formas de evitá-lo:
1️⃣ Utilize factory functions ao invés de classes ou funções construtoras
Em JavaScript, qualquer função pode retornar um objeto. E quando ela faz isso sem o uso do `new`, ela é uma factory function.
Com factory functions, você gera novos objetos sem ter que lidar com as particularidades das classes, e sem ter que utilizar palavras-chave que vão te causar dores de cabeça, como `this` e `new`.
2️⃣ Utilize o "Event", em eventos
O event representa um evento que ocorre no DOM.
No código abaixo, o this corresponde ao "<form>" apenas se uma função tradicional é utilizada como handler do evento:
O event representa um evento que ocorre no DOM.
No código abaixo, o this corresponde ao "<form>" apenas se uma função tradicional é utilizada como handler do evento:
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 👇
Baixe meu eBook gratuito e com exercícios 👇
