Carregando...

A palavra this

A mesma função de rótulo pode dizer caneca, depois perder o objeto e em seguida dizer xícara. As chaves ficaram no lugar. Mudou a chamada. JavaScript escolhe this na chamada, não enquanto você digita a função.

Depois da chamada simples de método

A página dos métodos guardou uma função no objeto e rodou com product.tag(). Nessa forma, this era o objeto antes do ponto. A página parou ali. Aqui a função fica e a chamada muda: solta do objeto, apontada com call, travada com bind ou escrita como seta.

Cinco formas em que a chamada define this

📊 Método, solta, call, bind, seta

Forma Exemplo Onde this cai
método product.tag() o objeto antes do ponto
solta let show = product.tag; show() não é esse objeto (undefined no modo estrito)
call product.tag.call(cup) o objeto que você entrega a call, só nesta execução
bind product.tag.bind(product) travado nesse objeto nas chamadas seguintes
seta () => this.name dentro de outra função o this da função de fora, não o objeto antes do ponto

Nomeie a chamada antes de ler this. Deixar a função no objeto não congela this. Quem decide é a chamada. bind decide de antemão para uma chamada posterior. Uma seta ignora a chamada e olha a função que a envolve.

Chamada de método — this é o objeto antes do ponto

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());

O ponto continua nomeando o objeto

product.tag() executa tag e põe this em product. O console escreve Mug. É a regra da página dos métodos, deixada aqui como linha de base. As quatro chamadas seguintes saem dessa linha de propósito.

Chamada solta — o objeto não vem junto

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());

Tire a função do objeto e a caneca vai com o ponto

show e product.tag são a mesma função. show() não tem objeto antes de um ponto, então no modo estrito this é undefined. A sentinela devolve missing. Sem a sentinela, this.name lança erro. Esta página fica no modo estrito para o resultado ser previsível. Um script solto pode apontar uma chamada nua para o objeto global.

Aponte this para outro objeto com call

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));

call empresta a função a um único objeto

product.tag.call(cup) ainda executa o tag da caneca, mas this é cup só nesta passagem. O console escreve Cup. product.name continua Mug. call não cola a função em cup. apply faz o mesmo trabalho quando os argumentos extras estão num array — este rótulo não precisa deles.

Trave o objeto com bind

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());

bind guarda o objeto para uma chamada solta posterior

bind devolve uma função nova. Dentro dela, this continua product mesmo que show() não tenha ponto. O console escreve Mug. O tag original não muda. Use bind quando um botão, um temporizador ou outra função for chamar o método sem o objeto na frente.

A seta pega this da função de fora

javascript 
"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());

Uma seta não pega this no ponto

product.tag() parece chamada de método, mas tag é uma seta. Uma seta não tem this próprio. Ela usa o this de make, e make rodou como shelf.make(), então this é shelf. O console escreve Shelf, não Mug. Um método comum em product teria escrito Mug. As setas apareceram numa página anterior; aqui só se vê o que fazem com this.

Case a chamada com o trabalho

O objeto está antes do ponto? Leia this como esse objeto. Você tirou a função e não travou? Não espere o objeto. Outro objeto, uma só passagem? Use call. Uma chamada posterior sem ponto ainda deve ver a caneca? Primeiro bind. Escreveu uma seta? Olhe para fora, para a função que a envolve, não para o objeto antes do ponto. Construtor e classe também ajustam this, e ficam para uma página mais adiante. O próximo é JSON: texto que descreve dados, não outra regra para this.

Ponha um rótulo travado na página

Trave tag na caneca com bind e chame essa função nova sem ponto. Escreva o resultado num parágrafo.

Demo da página — rótulo travado

html 
<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>

O parágrafo mostra Mug. show() não tem objeto antes de um ponto, e a linha ainda nomeia a caneca porque bind travou this. Mude só product.name, atualize, e o parágrafo acompanha. Próxima lição: JSON em JavaScript — texto que descreve dados, não uma regra nova para this.

Passos de prática

  1. Chame product.tag() e leia Mug.
  2. Copie a função para show, chame show() no modo estrito e leia missing.
  3. Chame product.tag.call(cup) e leia Cup.
  4. Trave tag em product, chame a função nova sem ponto e leia Mug.
  5. Rode shelf.make() e leia Shelf, não Mug.
  6. Na demo HTML, mude só product.name, atualize e leia o parágrafo.

Escorregões frequentes

  • Tratar this como congelado só porque a função está no objeto
  • Chamar show() no modo estrito e ainda esperar Mug
  • Achar que call copia tag para cup
  • Esperar que bind reescreva o tag original em vez de devolver uma função nova
  • Escrever uma seta no lugar do método e esperar o objeto antes do ponto
  • Ler a página seguinte como outra regra de this — JSON é um formato de texto para dados

Resumo

  • A chamada escolhe this, não as chaves
  • object.method() põe this no objeto antes do ponto
  • Uma chamada solta no modo estrito não aponta this para esse objeto
  • call põe this no objeto que você passa, só nessa passagem
  • bind devolve uma função cujo this fica travado
  • Uma seta usa this da função que a envolve
  • Uma chamada travada pode encher uma linha da página
  • A seguir: JSON, texto que descreve dados

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 36 de 37
Javascript Tutorial