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 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

Exemplo:

Exemplo do this

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.

this global

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:

this modo não estrito

Contudo no modo estrito o JavaScript define o this como undefined, vamos ver o exemplo abaixo:

strict mode

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.

Uso do operador new

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! 🙂