# Dominando o "this" em JavaScript

> Domine 'this' em JavaScript de vez. Entenda contexto, binding, arrow functions e todos os casos de uso com clareza. Aprenda definitivamente!

URL: https://dpw.dev/javascript/this-javascript-dominando/  
Publicado em: 2017-01-09  
Categoria: javascript  
Tags: basico-da-web  
Autor: Tárcio Zemel

A palavra-chave `this` em JavaScript confunde desenvolvedores JavaScript novos e experientes. Este artigo pretende elucidar a questão de uma vez, deixando claro como usar `this` corretamente em todos os cenários, incluindo situações mais peculiares em que normalmente `this` se revela mais difícil de ser compreendido.

> Artigo baseado em [Understand JavaScript´s 'this' With Clarity, and Master It](http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/).

Em JavaScript, usa-se `this` de forma semelhante ao uso de pronomes em linguagens naturais, como o inglês ou francês. Escreve-se: "João está correndo rápido porque ele está tentando pegar o trem". Note o uso do pronome "ele". Poderia se ter escrito: "João está correndo rápido porque João está tentando pegar o trem". Não se reutiliza "João" 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.

Exemplo:

```javascript
var person = {
    firstName : "Penelope",
    lastName  : "Barrymore",
    fullName  : function() {
        // Notou o uso do "this" tal como se usou "ele" no exemplo da frase anterior?
        console.log( this.firstName + ' ' + this.lastName );

        // Também poderia se ter escrito:
        console.log( person.firstName + ' ' + person.lastName );
    }
}

```

Se se usa `person.firstName` e `person.lastName`, tal como no último exemplo, o código se torna ambíguo. Considere que poderia haver outra variável global (você estando ciente dela ou não) com o nome "person". Em seguida, as referências a `person.firstName` poderiam tentar acessar a propriedade `firstName` da variável global `person` e isso poderia levar a erros difíceis de serem depurados. Portanto, usa-se a palavra-chave `this` não apenas para fins "estéticos" (isto é, como um referente), mas, também, para fins de precisão. Seu uso realmente torna o código mais inequívoco, assim como o pronome "ele" tornou a frase mais clara, informando que se estava referindo ao João específico do início da frase.

Assim como o pronome "ele" é usado para se referir ao antecedente (substantivo a que um pronome se refere), a palavra-chave `this` é similarmente usada para se referir a um objeto a que a função (onde `this` é usado) está vinculada. Esta palavra-chave não se refere apenas ao objeto, mas também contém o valor do objeto. Assim como o pronome, isso pode ser pensado como um atalho (ou um substituto razoavelmente não-ambíguo) para se referir ao objeto no contexto (o "objeto antecedente").

## O básico sobre `this` em JavaScript

Primeiramente, é preciso saber que todas as funções em JavaScript têm propriedades, assim como os objetos têm propriedades. E quando uma função é executada, ela obtém a propriedade `this` -- uma variável com o valor do objeto que invoca a função na qual `this` é usado.

A referência ao `this` **sempre** se refere a (e contém o valor de) um objeto -- um objeto singular -- e normalmente é usado dentro de uma função ou método, embora possa ser usado fora de uma função no escopo global.

> **Dica:** Quando em modo estrito (_strict mode_), `this` mantém o valor `undefined` em funções globais e em funções anônimas que não estão vinculadas a nenhum objeto.

`this` é usado dentro de uma função (digamos função "A") e ele contém o valor do **objeto** que invoca a função A. Isso é preciso para acessar métodos e propriedades do objeto que invoca a função A, especialmente porque nem sempre é possível saber o nome do objeto invocador e, às vezes, não há nenhum nome para usar para se referir ao objeto invocando. Na verdade, `this` é realmente apenas um atalho-referência ao "objeto antecedente" (ou o objeto invocador).

Reflita sobre este exemplo básico que ilustra o uso de `this` em Javascript:

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml