'this' em Javascript
Tags: javascript, webdev, fullstack, beginners
Published: 2020-02-25 22:13:10


# **_this_** em javascript

Oi Pessoas

Muitos programadores se confundem ao usar a keyword **_this_**, principalmente porque **_this_** em javaScript se comporta diferente de outras linguagens, além de ter modo restrito e não restrito.

Simplificando, **_this_** refere-se à um objeto de um determinado contexto, por exemplo, um método.

>IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)

#### Para quem é iniciante

- O que é um objeto ?

> Objeto é uma coleção de dados e/ou funções

_Exemplo de objeto_
```javascript
const pessoa = {
    nome: "Cebolinha",
    idade: 80,
    pai: "Mauricui de Sousa",
    melhoAmiga: "Mônica"
 }
```

- O que é um método ?

> É uma ação de um objeto

_Exemplo de método_

```javascript
const pessoa = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}
```





#### No contexto global
Em um contexto global, **_this_** refere-se ao objeto global 

```javascript
// Em navegadores web, o objeto window é também o objeto global:
console.log(this === window); // true

// o objeto document é o proprietário de todos os demais objetos da página
console.log(this.document === document); // true

//Neste caso, tanto que podemos referenciar por this ou window 
this.meuValor= 37;
console.log(this.meuValor); // 37
console.log(window.meuValor); // 37
console.log(meuValor); // 37
```









#### 'use strict'

No exemplo abaixo, sem o uso do 'use strict', ao executarmos a função getThis, criada no escopo global, em algum navegador, vamos ter como retorno o objeto window. 


```javascript
function getThis () {
  return this
}
console.log(getThis()) // Objeto window
```

Quando usarmos 'use strict', essa diretiva faz com que o **_this_** global seja _undefined_.


```javascript
'use strict'

function getThis () {
  return this
}

console.log(getThis()) // undefined
```










#### No contexto de objeto
Em um contexto de objeto, refere-se a instancia do objeto

_Exemplo 1_
```javascript
const pessoa2 = {
    nome: "Cebolinha",

    correr: function() {
         console.log(this);
    }
}

pessoa2.correr(); // => Object {nome: "Cebolinha", correr: }
```

_Exemplo 2_
```javascript
const pessoa = {
    nome: "Cebolinha",
    idade: 80,

    aniversario: function() {
         this.idade += 1;
    }
}

console.log('Idade '+pessoa.idade + "."); // => Idade 80.

pessoa.aniversario(); // += 1

console.log('Idade '+pessoa.idade + "."); // => Idade 81.
```






#### Arrow Functions (ou funções de seta)
Nas arrow functions o **_this_** é definido pelo contexto da execução.
Não importa como for, o this do foo mantém o valor que recebeu quando foi criado.

_Exemplo de **_this_** em arrow function_
```javascript
var objetoGlobal = this; 
var minhaFuncaoArrow = (() => this);

//this assume o objeto global
console.log(minhaFuncaoArrow() === objetoGlobal); // true

//mesmo que seja chamado de outra função
var obj = {MeuMetodo: minhaFuncaoArrow};
console.log(obj.MeuMetodo() === objetoGlobal); // true
```

Mesmo que seja um método de um objeto mantem o valor no momento da criação

```javascript
let exampleFunc = {
    f1: function () {
        console.log("exampleFunc f1", this);
        let f2 = function () {
            console.log("exampleFunc f2", this);
        }
        f2();
    }
}


let exampleArrow = {
    f1: () => {
        console.log("exampleArrow f1", this);
        let f2 = () => console.log("exampleArrow f2", this);
        f2();
    }
}

exampleFunc.f1();
exampleArrow.f1();

exampleF.f1();
// Resultado
// Objeto
// Window

exampleA.f1();
// Resultado
// Window
// Window

```

> Se fosse simplificar, Arrow Functions substituem as functions, só que não. Tenho um post onde explico sobre **_Arrow Functions_** {% post https://dev.to/kabrau/arrow-functions-ou-funcoes-de-seta-3ic6 %}









#### Perdi Algo ?
Por favor, me diga se eu esqueci de algo !!


#### Referências

* https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31
* https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos/B%C3%A1sico
* https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this
* https://dev.to/migben/let-s-learn-this-in-javascript-1ij2
* https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm
* https://blog.da2k.com.br/2019/01/07/javascript-tudo-sobre-arrow-functions/