DEV Community

loading...

'this' em Javascript

kabrau profile image Marcelo Cabral Ghilardi ・3 min read

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


Perdi Algo ?

Por favor, me diga se eu esqueci de algo !!

Referências

Discussion (2)

pic
Editor guide
Collapse
vinipickrodt profile image
Vinicius Da Mata Pickrodt

Muito bom, outros dois detalhes também seriam..

  • A variável arguments não está presente nas arrow functions.
  • Arrow functions não são "instânciaveis" (usando new...) como as functions normais.
Collapse
kabrau profile image