O que é 'this'? Referenciando o próprio objeto

Desvende o mistério da palavra-chave 'this' e como ela aponta para o objeto atual.

O this é uma palavra-chave do JavaScript que significa, de forma simples:

“este contexto aqui”
ou
“o objeto atual nesta chamada”

Pense no this como alguém dizendo “eu” dentro de uma conversa.
Quem é “eu” depende de quem está falando naquele momento.

Exemplo básico (método de objeto)

const pessoa = {
  nome: "Marina",
  apresentar() {
    return `Oi, eu sou ${this.nome}`;
  }
};

console.log(pessoa.apresentar()); // Oi, eu sou Marina

Aqui, this aponta para pessoa, então this.nome é "Marina".

Regra importante: this depende de como a função é chamada

Não é onde a função foi escrita que manda.
O que manda é a forma da chamada.

1) Em método de objeto

const carro = {
  modelo: "Fusca",
  mostrar() {
    console.log(this.modelo);
  }
};

carro.mostrar(); // Fusca

this aponta para carro.

2) Em função comum (fora de objeto)

function teste() {
  console.log(this);
}

O valor de this varia conforme o modo de execução (strict mode, navegador etc.).
Para iniciantes: evite depender de this em função solta até dominar o contexto.

3) Em função seta (=>)

Função seta não cria seu próprio this.
Ela “herda” o this do lugar onde foi criada.

const usuario = {
  nome: "Rafa",
  falar() {
    const interno = () => {
      console.log(this.nome);
    };
    interno();
  }
};

usuario.falar(); // Rafa

4) Em eventos do DOM (função normal)

Em manipuladores de evento com função normal, this costuma ser o elemento que recebeu o evento.

botao.addEventListener("click", function () {
  console.log(this); // o próprio botão
});

call, apply e bind (ajustando o this manualmente)

Você pode escolher o contexto de this:

function saudacao() {
  console.log(`Olá, ${this.nome}`);
}

const pessoa = { nome: "Lia" };

saudacao.call(pessoa);  // Olá, Lia
saudacao.apply(pessoa); // Olá, Lia

const novaFuncao = saudacao.bind(pessoa);
novaFuncao(); // Olá, Lia
  • call: chama agora, passando argumentos separados
  • apply: chama agora, passando argumentos em array
  • bind: cria nova função com this fixo

Erros comuns com this

  • Achar que this é sempre o objeto onde a função foi escrita.
  • Usar função comum dentro de método e perder contexto sem perceber.
  • Confundir comportamento de função normal com função seta.

Boas práticas

  • Em métodos de objeto, use this para acessar propriedades do próprio objeto.
  • Prefira nomes claros de métodos.
  • Quando houver perda de contexto, considere bind ou função seta (com critério).
  • Teste com console.log(this) para confirmar o contexto real.

Resumo da lição

  • this representa o contexto atual da execução.
  • Em métodos, geralmente aponta para o objeto que chamou o método.
  • Em função seta, this é herdado do contexto externo.
  • Entender this evita muitos bugs em POO e eventos.