Desvendando o this

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

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/

E-mail: dev.gabrielramos@gmail.com