'this' em Javascript

#javascript #webdev #fullstack #beginners

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

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

const pessoa = {
    nome: "Cebolinha",

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

No contexto global

Em um contexto global, this refere-se ao objeto global

// 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.

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

Quando usarmos 'use strict', essa diretiva faz com que o this global seja undefined.

'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

const pessoa2 = {
    nome: "Cebolinha",

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

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

Exemplo 2

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_

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

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

Arrow Functions (ou funções de seta)

Marcelo Cabral Ghilardi ・ Feb 26 '20

#javascript #webdev #beginners #fullstack