Como funciona o “THIS” em funções Javascript

Olá meu caro amigo sofredor, se você chegou até aqui significa que descobriu mais uma dos várias tretas do Javascript, mas não se preocupe, hoje eu vou te ajudar a entender de um modo bem simples.

Me acompanhe 🤠

No Javascript, o “this” é uma referência ao objeto que está sendo manipulado em um contexto de execução. E em uma função, o valor de “this” depende da forma como ela é chamada. O valor é diferente dependendo de qual o tipo é a sua função, e cada uma delas pode ter um tipo de utildade.

Função normal

Em funções normais, o valor de “this” é definido pelo “objeto” que invoca a função. Se a função é chamada como um método de um objeto, o “this” faz referência a esse objeto. Se a função é chamada sem fazer parte de um objeto, o “this” fará referência ao objeto global.

Exemplo 1 – como método de um objeto:

const cavalo1 = {
  nome: "Relâmpago",
  posicao: 0,
  correr: function() {
    this.posicao += 3;
    console.log(`${this.nome} correu 3 passos e está na posição ${this.posicao}`);
  }
};

cavalo1.correr(); // "Relâmpago correu 3 passos e está na posição 3"

Nesse exemplo, temos um objeto “cavalo1” com uma propriedade “correr” que é uma função normal. Quando chamamos o método “correr” do objeto “cavalo1”, o valor de “this” é uma referencia ao próprio objeto “cavalo1”.

Exemplo 2 – sem um objeto invocador:

function correr() {
  this.posicao += 2;
  console.log(`${this.nome} correu 2 passos e está na posição ${this.posicao}`);
}

const cavalo2 = {
  nome: "Trovoada",
  posicao: 0,
  correr: correr
};

correr(); // "undefined correu 2 passos e está na posição NaN"

cavalo2.correr(); // "Trovoada correu 2 passos e está na posição 2"

Nesse exemplo, criamos uma função “correr” que não é um método de nenhum objeto específico. Quando chamamos a função diretamente sem um objeto invocador, o valor de “this” é definido como o objeto global (no navegador) ou o objeto “global” do Node.js (no ambiente Node.js), que não tem a propriedade “posicao” definida.

No entanto, quando chamamos o método “correr” do objeto “cavalo2”, o valor de “this” é definido como o objeto “cavalo2”, e o código funciona corretamente.

Arrow function

Em uma arrow function, o valor de “this” é definido pelo escopo onde a função é definida, e não no momento em que a função é chamada. Isso significa que o valor de “this” em uma arrow function é o mesmo valor de “this” fora da função arrow.

Exemplo:

const cavalo3 = {
  nome: "Pé de Vento",
  posicao: 0,
  correr: () => {
    this.posicao += 1;
    console.log(`${this.nome} correu 1 passo e está na posição ${this.posicao}`);
  }
};

cavalo3.correr(); // "undefined correu 1 passo e está na posição NaN"

Nesse exemplo, usamos uma função arrow para definir o método “correr” do objeto “cavalo3”. Como as funções arrow têm o valor de “this” definido no momento em que são definidas, e não no momento em que são chamadas, o valor de “this” dentro do método “correr” não é definido como o objeto “cavalo3”, mas sim como o objeto global (no navegador) ou o objeto “global” do Node.js (no ambiente Node.js), que não tem a propriedade “posicao” definida.

Conclusão

Como pode ver, o uso incorreto do “this” pode causar uma bela lambança, e para piorar, nos exemplos anteriores foi usado template string, onde existe mais um problema do Javascript, que retorna uma string esquisita. Em um uso realista seria disparado um erro dizendo que o “this” é undefined. Ou seja, pense bem sobre qual função usar, e em qual contexto.

Bom… por hoje é só.