Herança de classes
TeaOrder usa a estrutura de Order e acrescenta extra para o detalhe do chá, sem reescrever o que já é comum.
Além dos cookies
A lição anterior terminou em theme / dark. Agora criamos objetos na memória, em vez de guardar texto no navegador.
O trabalho do pai
Order recebe drink e size. Seu label monta a descrição que qualquer pedido pode aproveitar.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
O console mostra tea / regular. order instanceof Order é true, e o método é compartilhado pelo prototype.
O filho prepara a base
extends Order declara a herança. O construtor filho precisa iniciar a parcela herdada antes do próprio campo.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
A saída traz tea e depois mint. Usar this.extra antes de super causa ReferenceError.
Personalizar com reaproveitamento
TeaOrder substitui label, mas chama super.label() para não repetir a montagem de drink e size.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
Assim surge tea / regular / mint. A instância satisfaz instanceof TeaOrder e também instanceof Order.
Papéis bem separados
Order cuida de todo pedido; TeaOrder cuida da informação exclusiva do chá. Não crie um filho apenas para trocar um nome.
Resultado no documento
A página constrói TeaOrder e escreve sua etiqueta personalizada.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
A linha é tea / regular / mint. theme / dark era dos cookies; tea / regular ainda não tinha o extra.
Faça o percurso
Monte um Order, depois um TeaOrder com mint. Ponha super antes de this.extra e aproveite super.label().
Onde escorrega
Não use this cedo demais, não copie a etiqueta inteira do pai e não esqueça que o filho continua sendo Order.
Em resumo
extends une as classes; super(...) prepara a parte pai; a sobrescrita acrescenta somente seu detalhe.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 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