O this em JavaScript é um dos conceitos mais difíceis de se entender, e confunde desenvolvedores experientes até hoje. Neste artigo, vou te ajudar a entender o this de uma forma mais fácil e te dar uma boa noção de como utilizá-lo.
Em JavaScript, usa-se
Richard Bovellthis
de forma semelhante ao uso de pronomes em linguagens naturais, como o inglês ou francês. Escreve-se: “Jhon está correndo rápido porque ele está tentando pegar o trem”. Note o uso do pronome “ele”. Poderia ter escrito: “Jhon está correndo rápido porque Jhon está tentando pegar o trem”. Não se reutiliza “Jhon” dessa maneira, pois se assim fosse, nossa família, amigos e colegas nos abandonariam… De uma maneira graciosamente semelhante, em JavaScript se usa a palavra-chavethis
como um atalho, um referente; ou seja, o sujeito no contexto ou o sujeito do código em execução.
Exemplo:
Você consegue perceber que se usarmos Pessoa.nome
e Pessoa.sobrenome
como na citação acima, nosso código torna-se ambíguo?
Agora pense da seguinte forma: se existir uma outra variável global chamada “Pessoa”, e em seguida, as referências a Pessoa.nome
tentarem acessar a propriedade nome
da Pessoa (variável global) isso causaria vários problemas.
Então, usamos a palavra "this"
para termos precisão, quando se trata de mexer em objetos tornando assim nosso código mais inequívoco.
Assim como o pronome “ele” foi usado para se referir a Jhon na nossa frase de exemplo, o this
é usado para se referir ao objeto que ele está vinculado. Em outras palavras, o this
faz referência ao objeto que está chamando a função no momento.
O this no contexto global
No contexto global, o this faz referência ao window
no browser e ao objeto global
no Node.js. E esse comportamento não muda, ou seja, o this no contexto global vai sempre apontar para um desses dois objetos.
O this no contexto de função
A princípio, entenderemos que no JavaScript temos alguns contextos de funções, que dependem de como a função foi chamada.
- Function invocation (Chamada de função)
- Constructor invocation (Chamada de construtor)
- Method invocation (Chamada de método)
Em cada chamada define seu contexto, e consequentemente o this
varia de acordo com a chamada, o que faz com que o this
se comporte de maneira diferente.
1° Function invocation
Como já vimos anteriormente, no modo não estrito o this vai pertencer a window no borwser e ao global no node:
Contudo no modo estrito o JavaScript define o this como undefined
, vamos ver o exemplo abaixo:
Para definirmos o modo estrito basta fazer uso da diretiva "use strict";
antes de iniciar qualquer código.
Constructor Invocation
No constructor invocation nós utilizamos a palavra reservada new
par instanciar um objeto. Implicitamente essa função tem um construtor (constructor) que independente de ter sido declarado ou não, sempre será chamado.
Todas as vezes que nós usamos o new Pessoa()
, é feita uma chamada ao construtor da função Pessoa
. O JavaScript por sua vez cria um objeto e define o this
para aquele determinado objeto recém criado.
Method invocation
Quando você tem um objeto e dentro dele você tem uma função (método), o JavaScript vincula o this
ao objeto que contém a função/método que foi chamado.
Dessa forma, o this
vai ser vinculado ao objeto pessoa, como no exemplo mostrado acima. Pois a função obterInformacao()
está dentro do objeto Pessoa, criando assim um “vinculo” entre o objeto e o método.
Conclusão
Neste artigo nós entendemos alguns dos principais conceitos por trás do this
, como e onde usá-los. Além disso, entendemos a importância do this, e a confusão que seria se ele não existisse.
Espero que esse artigo tenha te ajudado, obrigado chegar até aqui e até a próxima! 🙂