Carregando...

Métodos de objeto

O nome e o preço da caneca já estão juntos. À página ainda falta um trabalho pequeno que seja da caneca: montar a etiqueta, subir a contagem do carrinho, cumprimentar quem compra. Essa função fica no objeto. Isso é um método.

Depois das chaves e das listas

A lição das propriedades acrescentou um campo, tirou outro, perguntou com in, entrou num objeto aninhado e listou nomes com Object.keys. Ali nenhuma função correu. Aqui o valor de uma propriedade é uma função, e ela corre a partir do objeto que a guarda.

Cinco movimentos com um método

📊 Guardar, chamar, atalho, this, argumento

Movimento Sintaxe O que você obtém
guardar greet: function () { return "Hi"; } uma função sentada no objeto
chamar product.greet() a função corre e você recebe o resultado
atalho label() { return this.name; } a mesma espécie de função, escrita mais curta
this this.name dentro do método o objeto que estava antes do ponto
argumento cart.add(3) entrada extra só para esta chamada

Dê nome ao movimento e só então escreva a linha. Guardar não executa a função. O atalho não é um tipo novo de valor. this não é um nome global de produto que você espera existir. Um argumento é entrada desta chamada, não um segundo objeto.

Guardar uma função no objeto

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

O valor pode ser uma função

name guarda uma cadeia. greet guarda uma função. typeof product.greet vale "function". Ainda nada correu, por isso Hi não aparece. O nome da caneca continua ao lado da função.

Chamar o método com parênteses

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

Os parênteses são o botão de arranque

product.greet() entra na função. A consola mostra Hi. Sem os parênteses, você olha para a função, não para o que ela devolve. O ponto diz a qual objeto a chamada pertence.

Atalho do método dentro do literal

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

O atalho só encurta a escrita

Dentro das chaves, label() { ... } põe uma função na chave label. É a mesma espécie de propriedade que greet: function () { ... }, com menos teclas. product.label() executa-a. O corpo lê this.name e a consola mostra Mug.

Ler campos vizinhos com this

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

Numa chamada simples, this é o objeto antes do ponto

product.tag() quer dizer: executa tag e deixa this ser product. Aí this.name e this.price são os campos dessa caneca. A consola mostra Mug — 8. Um name solto dentro do método é outra procura, não a propriedade. Quando a chamada deixa de ter a forma object.method(), this pode apontar para outro sítio — isso fica para a lição seguinte. Esta página fica na chamada simples.

Passar um argumento ao método

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

O método recebe dados para esta chamada

add espera extra. cart.add(3) entrega 3, soma-o a count e devolve o total novo. A consola mostra 5. O carrinho fica com esse count já atualizado. O argumento vive na chamada; só vira propriedade se você o guardar.

Escolha o movimento que serve ao trabalho

A função tem de viver no objeto? Guarde-a, forma longa ou curta. Quer o resultado? Chame com (). Quer os campos do próprio objeto? Leia-os por this. Precisa de um número só para esta execução? Passe um argumento. Object.keys listou nomes na página anterior. A seguinte fica com this quando a forma da chamada muda.

Ponha a etiqueta do método na página

Dê ao produto name, price e tag. Escreva product.tag() num parágrafo.

Demonstração da página — etiqueta do método

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

O parágrafo mostra Mug — 8. tag montou essa cadeia com os campos do próprio produto. Mude só name ou price, atualize e leia a linha nova. Lição seguinte: a palavra this — para onde this aponta quando a chamada já não é um object.method() simples.

Passos de prática

  1. Guarde uma função em greet e mostre typeof dessa propriedade.
  2. Chame product.greet() e leia Hi.
  3. Escreva label com o atalho e mostre product.label().
  4. Construa tag para que this.name e this.price formem uma cadeia.
  5. Comece count em 2, chame add(3) e leia 5.
  6. Na demonstração HTML mude só name ou price, atualize e leia o parágrafo.

Escorregões frequentes

  • Mostrar product.greet sem () e esperar Hi
  • Tratar o atalho label() {} como propriedade de texto
  • Escrever name solto dentro do método em vez de this.name
  • Achar que cart.add(3) deixa count em 2
  • Ir a Object.keys quando queria chamar um método
  • Deixar uma função seta como método desta página — a lição seguinte segue this quando a forma da chamada muda

Resumo

  • Um método é uma função guardada como propriedade
  • object.method() executa-a e devolve o valor
  • O atalho name() {} guarda essa mesma espécie de função
  • Numa chamada simples, this é o objeto antes do ponto
  • O parâmetro recebe o argumento dessa chamada
  • A cadeia do método pode encher uma linha da página
  • A seguir: a palavra this, quando a chamada não é object.method()

🧠 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 35 de 37
Javascript Tutorial