Modern JavaScript met ES6-ES13 (JS-handleiding)

Erfelijkheid in JavaScript: Met ES6 naar moderne klassen

Alle video's van de tutorial Modern JavaScript met ES6-ES13 (JS-handleiding)

Erfelijkheid is een centraal concept in de objectgeoriënteerde programmering, waarmee je bestaande klassen kunt uitbreiden en hun eigenschappen en methoden kunt gebruiken. JavaScript introduceerde met ES6 een nieuwere en robustere syntaxis voor erfelijkheid, die veel gemakkelijker te hanteren is dan de oorspronkelijke prototype-methoden. In deze handleiding zal ik je laten zien hoe je erfelijkheid in JavaScript toepast met behulp van het keyword extends, en ik zal je stap voor stap uitleggen hoe je de constructor van de basis klasse correct aanroept met super.

Belangrijkste inzichten

  • De erfelijkheid in JavaScript gebeurt via het extends-keyword.
  • De constructor van de basis klasse moet worden aangeroepen met super.
  • Instantievariabelen kunnen in de afgeleide klasse worden gerefereerd met het sleutelwoord this.

Stap-voor-stap handleiding

Basisklasse aanmaken

Om te beginnen met de erfelijkheid, maken we eerst een basisklasse genaamd Shape. In deze klasse definiëren we de constructor en enkele methoden.

Hier definieer je een klasse Shape die een constructor heeft. Je kunt in deze constructor variabelen en functies definiëren waar andere klassen toegang toe hebben.

Erfelijkheid in JavaScript: Met ES6 naar moderne klassen

Subklasse verkennen

Na het maken van de basisklasse kun je nu een subklasse maken die van Shape erft. In dit voorbeeld noemen we de nieuwe klasse ConcreteShape.

In deze subklasse gebruiken we het extends-keyword om aan te geven dat ConcreteShape van Shape erft. De constructor van de subklasse roept de constructor van de basis klasse Shape aan met super(), wat noodzakelijk is om de erfelijkheid correct te implementeren.

Instantiëren van de subklasse

Nu we de subklasse hebben gemaakt, is het tijd om een instantie van deze klasse te creëren.

Hier creëer je een nieuw object myShape van de klasse ConcreteShape en geef je een beschrijving door aan de constructor. Vervolgens roep je de print-methode aan die de beschrijving weergeeft.

Extra eigenschappen toevoegen

Je kunt extra eigenschappen of zelfs methoden die specifiek zijn voor deze subklasse aan je subklasse toevoegen.

Hier heb je de ConcreteShape-klasse uitgebreid door extra parameters aan de constructor toe te voegen.

Gebruik van erfelijkheid

Met het super-keyword kun je de methode describe van de basis klasse aanroepen om de eigenschappen van de basis klasse en de subklasse te combineren.

Samenvatting – Erfelijkheid in JavaScript: Van ES6 naar ES13

In deze tutorial heb je geleerd hoe erfelijkheid in JavaScript werkt, met name met de nieuwe class-syntaxis. Je hebt gezien hoe je klassen definieert, hoe je van een basisklasse erft en hoe je de constructor correct aanroept. Deze mechanismen maken het gemakkelijker om je codebasis schoon en onderhoudbaar te houden door functies efficiënt te hergebruiken.

Veelgestelde vragen

Wat is het verschil tussen super() en this?super() wordt gebruikt om de constructor van de basis klasse aan te roepen, terwijl this verwijst naar de instantie van de huidige klasse.

Waarom is het gebruik van ES6-klassen beter dan prototypes?De ES6-klassen bieden een duidelijkere en intuïtieve syntaxis die het lezen en begrijpen van de code vergemakkelijkt.

Kan ik meerdere basisklassen hebben?Nee, JavaScript ondersteunt geen meervoudige erfelijkheid. Een klasse kan slechts van één andere klasse erven.

Wat gebeurt er als ik super() niet aanroep?Als je super() niet aanroept, krijg je een fout, omdat de constructor van de basis klasse, die initialiseert wat nodig is voor de klasse, niet wordt uitgevoerd.