Blog Formação DEV

Entendendo o this – JavaScript

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.
Entendendo o this – JavaScript
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! 👾

Sobre o autor
Cod3r

Cod3r

Com mais de 400 mil alunos, a Cod3r é uma das principais escolas de tecnologia do País. Um de seus produtos mais importantes é a Formação DEV, com objetivo de preparar os profissionais para o mercado.

Ótimo! Inscreveu-se com sucesso.

Bem-vindo de volta! Registou-se com sucesso.

Assinou com sucesso o Blog Formação DEV .

Sucesso! Verifique o seu e-mail para obter o link mágico para se inscrever.

As suas informações de pagamento foram atualizadas.

Seu pagamento não foi atualizado.