Herança, super e quando preferir composição
Estenda uma classe-base com extends, chame super nos construtores, substitua métodos com segurança e saiba quando uma composição simples é melhor
Herança, super e quando preferir composição é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Visão geral
Objetivo: usar herança básica sem confusão.
- extends cria uma classe filha
- super(...) chama o construtor da classe pai
- Substitua um método; opcionalmente chame super.method()
- Se não for uma relação de “é-um”, prefira a composição
extends + super
Crie uma classe filha com extends; chame super(name) para executar o construtor da classe pai e configurar this.
// Base class with a small field and method
class Animal {
constructor(name) {
this.name = name;
}
info() {
return "Animal:" + this.name;
}
}
// Child class extends the base and calls super(...)
class Dog extends Animal {
constructor(name, breed) {
// must call super() before using this
super(name);
this.breed = breed;
}
speak() {
return "woof";
}
}
const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
Substituição de método
Ao substituir um método, você pode chamar super.method() para reutilizar a lógica básica e depois adicionar seu ajuste.
// Override a method; keep parent behavior with super.method()
class Button {
click() {
return "base-click";
}
}
class IconButton extends Button {
click() {
// call parent behavior, then add something
const base = super.click();
return base + "+icon";
}
}
const b = new IconButton();
console.log(b.click()); // "base-click+icon"
Prefira composição para relações tem-um
Se a relação for tem-um (usa um auxiliar), prefira a composição à herança para manter as classes simples.
// Composition: use a helper object instead of extending
class Logger {
log(msg) {
console.log("[log]", msg);
}
}
class Player {
constructor(name, logger) {
this.name = name;
this.logger = logger; // has-a logger
}
score(points) {
this.logger.log(this.name + " +" + points);
}
}
const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
É-um vs tem-um
A herança modela uma relação de é-um: um Dog é um Animal. A composição é usada para auxiliares de tem-um.
// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Hábitos para iniciantes
Dicas:
- Mantenha as hierarquias rasas para iniciantes.
- Chame super(...) primeiro nos construtores das subclasses.
- Substitua apenas o necessário; reutilize com super.method().
- Prefira a composição para utilitários e funcionalidades transversais.
Questionário sobre fundamentos de super(...)
Verificação rápida: super em um construtor de subclasse.
Resumo
Resumo: use extends para relações realmente de é-um, chame super(...) no início, substitua com cuidado (chame super.method() quando for útil) e prefira a composição para auxiliares.
Perguntas Frequentes
A aula “Herança, super e quando preferir composição” é grátis?
Sim — o texto completo de “Herança, super e quando preferir composição” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Herança, super e quando preferir composição”?
Estenda uma classe-base com extends, chame super nos construtores, substitua métodos com segurança e saiba quando uma composição simples é melhor Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Herança, super e quando preferir composição”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Campos de classe, campos privados # e membros estáticos
- Herança, super e quando preferir composição
- Mixins (introdução) — reutilização simples sem hierarquias profundas