Desvendando o this
Tags: this, javascript, typescript
Published: 2021-04-24 16:02:39

## O que é o this?

Em uma explicação direta e concisa o *this* é um objeto de contexto. Ou seja, o *this*  vai referenciar um objeto levando em consideração o lugar em que ele foi declarado em nossa aplicação.

## Exemplo de um comportamento inusitado

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd5fazk71u2h13w8b84p.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd5fazk71u2h13w8b84p.png)

Analisando o código acima você deve estar se perguntando o que levou termos uma saída `" undefined"` ao invocarmos o método `getFullName()`. A resposta para essa pergunta é simples: *arrow functions* não possuem um *this* próprio, ou seja, esse *this* que declaramos dentro do método está armazenando o objeto que o *this* do escopo léxico (escopo acima, que envolve o método) armazena, ou seja, neste contexto o *this* declarado no método está referencindo o objeto global, que neste caso é o *Window*. Okay, tomando ciência que o *this* aponta para o objeto global peço que você abra seu devTools e na aba console inespecione o objeto *Window*, com isso você notará que ele possui uma propriedade `Window.name` que armazena uma *string* vazia, e é justamente essa *string* vazia que está sendo injetada dentro da nossa *template string*. Até ai tudo bem, sabemos que a expressão `this.name` resulta em uma *string* vazia e a mesma está sendo injetada em nossa *template string*. Então pronto, quebramos a primeira parte do problema, vamos para a segunda: o *undefined* que está sendo renderizado em nossa *string*. Bom, vimos que o *this* neste caso está referenciando o objeto global *Window,* mas este objeto não possui uma propriedade *lastName*, então o JavaScript por de baixo dos panos está atribuindo *undefined* para a expressão `this.lastName` e *undefined está sendo* injetado na *template string*.

"*E agora, já que uma arrow function não possui um this próprio como posso acessar o objeto na qual este método está declarado?"* - A resposta é simples, e você tem 2 saídas para resolver este problema: a primeira é substituir essa *arrow function* por uma *função tradicional*, isso porque uma *função tradicional* possui um *this* próprio; já a segunda alternativa é evitar o *this* e acessar o método referencinando o próprio objeto na qual o método está declarado.

Com este exemplo acima vimos 3 possíveis comportamentos do *this* em um objeto literal que em muitas das vezes deixa muito programador com os cabelos pro alto, e isso é normal, a ficha demora cair para entedermos o *this*, e em muitos contextos é até preferível evitá-lo, mas essa decisão é sua e/ou do time em que você trabalha. 

## Recap

Vamos lá pra 3 colinhas técnicas que concerteza te ajudarão ao utilizar o *this* sem quebrar tanto a cabeça:

- Se o *this* estiver declarado no escopo global, ou seja, na raiz do seu documento ele irá referenciar o objeto global;
- Se o *this* estiver declarado dentro de um método e este método é uma *arrow function* o *this* vai referenciar o valor que o *this* do escopo léxico armazena;
- Se o *this* é declarado em um método que é uma *função tradicional* ele irá referenciar o objeto na qual o método está declarado.

## Finalizando...

Bom, este foi meu primeiro de muitos posts por aqui, busquei com esta explicação demonstrar quais são os possíveis comportamentos do *this* em um objeto literal e também fora de um. Caso ainda ficou alguma dúvida eu posso te ajudar =). É só me contactar pelo Linkedin ou E-mail que deixei logo abaixo. Um grande abraço ❤

Linkedin: [https://www.linkedin.com/in/sou-gabriel/](https://www.linkedin.com/in/sou-gabriel/)

E-mail: dev.gabrielramos@gmail.com