Texto de: Marlliton Souza
Em JavaScript, usa-se this 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-chave this como um atalho, um referente; ou seja, o sujeito no contexto ou o sujeito do código em execução.
Richard Bovell
Contextualizando
Dê uma olhada no código abaixo:
Você consegue perceber que se usarmos Pessoa.nome
e Pessoa.sobrenome
, nosso código torna-se ambíguo? Pense da seguinte forma: se existir outra variável global chamada Pessoa, e em seguida, as referências a Pessoa.nome
tentarem acessar a propriedade nome
dessa 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 navegador e ao objeto global no Node.js. 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)
Cada chamada define seu contexto, e consequentemente o this
varia conforme a chamada, o que faz com que o this
se comporte de maneira diferente.
Function invocation
Como já vimos anteriormente, o this
fará referência a window no navegador e ao objeto global
no node:
Contudo, no modo estrito o JavaScript define o this
como undefined
, vejamos o exemplo abaixo:
Para usamos o modo estrito basta colocar o código "use strict";
antes de iniciar qualquer código.
Constructor Invocation
No constructor invocation utilizamos a palavra reservada new
para instanciar um objeto. Implicitamente essa função tem um construtor que independente de ter sido declarado ou não, sempre será chamado.
Todas às vezes que 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 chamado.
Dessa forma, o this
será vinculado ao objeto pessoa, como no exemplo mostrado acima. Pois a função obterInformacao() está no objeto Pessoa, criando assim um “vinculo” entre o objeto e o método.
Conclusão
Neste artigo 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 por chegar até aqui e até a próxima! 👾