Overerving, super en wanneer compositie de voorkeur heeft
Breid een basisklasse uit met extends, roep super aan in constructors, overschrijf methoden veilig en leer wanneer eenvoudige compositie beter is
Overerving, super en wanneer compositie de voorkeur heeft is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.
Het grote geheel
Doel: Basisovererving gebruiken zonder verwarring.
- extends maakt een subklasse
- super(...) roept de constructor van de bovenliggende klasse aan
- Overschrijf een methode; roep eventueel super.method() aan
- Als het geen is-a-relatie is, geef dan de voorkeur aan compositie
extends + super
Maak met extends een subklasse; roep super(name) aan om de constructor van de bovenliggende klasse uit te voeren en this in te stellen.
// 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());
Een methode overschrijven
Bij het overschrijven kun je super.method() aanroepen om logica uit de basisklasse opnieuw te gebruiken en daarna je aanpassing toe te voegen.
// 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"
Geef bij has-a de voorkeur aan compositie
Als de relatie has-a is (er wordt een hulpmiddel gebruikt), geef dan de voorkeur aan compositie boven overerving om klassen eenvoudig te houden.
// 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);
is-a versus has-a
Overerving modelleert een is-a-relatie: een Dog is een Animal. Compositie is bedoeld voor has-a-hulpmiddelen.
// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Gewoonten voor beginners
Tips:
- Houd hiërarchieën ondiep voor beginners.
- Roep super(...) als eerste aan in constructors van subklassen.
- Overschrijf alleen wat nodig is; hergebruik met super.method().
- Geef voor hulpprogramma's en functies die meerdere onderdelen raken de voorkeur aan compositie.
Quiz over de basis van super(...)
Korte controle: super in een constructor van een subklasse.
Samenvatting
Samenvatting: Gebruik extends voor echte is-a-relaties, roep super(...) vroeg aan, overschrijf zorgvuldig (roep super.method() aan wanneer dat helpt) en geef voor hulpfuncties de voorkeur aan compositie.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Overerving, super en wanneer compositie de voorkeur heeft” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Overerving, super en wanneer compositie de voorkeur heeft”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat leer ik in “Overerving, super en wanneer compositie de voorkeur heeft”?
Breid een basisklasse uit met extends, roep super aan in constructors, overschrijf methoden veilig en leer wanneer eenvoudige compositie beter is Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.
Hoe lang duurt de les “Overerving, super en wanneer compositie de voorkeur heeft”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Class fields, private # fields en static members
- Overerving, super en wanneer compositie de voorkeur heeft
- Mixins (kennismaking) — eenvoudig hergebruik zonder diepe hiërarchieën