JavaScript heeft zich door de jaren heen aanzienlijk ontwikkeld. Vooral met de invoering van ES6 is programmeren met klassen duidelijk gemakkelijker geworden. De oude methode voor het maken van klassen via prototypes en constructorfuncties was vaak omslachtig en foutgevoelig. In deze tutorial leer je hoe je de nieuwe class-syntaxis effectief kunt gebruiken en welke verschillen er zijn tussen de oude en de nieuwe schrijfwijze. Daarnaast leer je hoe je door middel van overerving je klassenstructuur kunt uitbreiden.
Belangrijkste bevindingen
- De nieuwe class-syntaxis maakt een duidelijkere en compactere definitievorm mogelijk.
- Het gebruik van constructeurs is eenvoudiger en vereist geen afzonderlijke prototypes.
- De functionaliteit achter de class-syntaxis blijft prototype-gebaseerd.
Stapsgewijze handleiding
1. De oude schrijfwijze begrijpen
Om de voordelen van de nieuwe classesyntaxis te herkennen, kijken we eerst naar de oude methode. Hierbij werd een constructorfunctie aangemaakt en werden de methoden via het prototype toegevoegd.
Als je een nieuw object wilt aanmaken, gebeurt dit met new Shape(1, 100, 200). Dan kan het object shape worden gebruikt om de eigenschappen op te halen.
2. Waarden weergeven
Om ervoor te zorgen dat onze objectinstantie correct functioneert, geven we de eigenschappen x en y weer.
3. De nieuwe class-syntaxis introduceren
Nu schakelen we over naar de nieuwe class-syntaxis, die vanaf ES6 beschikbaar is.
De veranderingen zijn duidelijk: je hebt geen afzonderlijk prototype meer nodig. In plaats daarvan definieer je alle methoden binnen de klasse zelf.
4. Objecten met de nieuwe klasse aanmaken
Het aanmaken van een object met de nieuwe syntaxis gebeurt net als voorheen. Je gebruikt new om een instantie van de klasse Shape te creëren.
5. Gebruik van de nieuwe klasse
Het gebruik van de nieuw gedefinieerde klasse is identiek aan de oude methode. Je kunt de instantie shape1 gebruiken om de waarden op te halen en de move-methode te gebruiken.
6. Overerving in klassen
Een ander voordeel van de class-syntaxis is de mogelijkheid tot overerving. Als je een nieuwe klasse wilt maken die van een bestaande klasse erft, kun je het sleutelwoord extends gebruiken.
Hierbij roept de constructor van de kindklasse super() de constructor van de ouderklasse aan. Dit stelt je in staat om de eigenschappen van Shape te gebruiken en tegelijk unieke eigenschappen voor Rectangle te definiëren.
7. Conclusie over de class-declaratie
De class-syntaxis maakt je codebasis niet alleen overzichtelijker, maar staat ook een duidelijkere structurering toe bij het werken met objectgeoriënteerde concepten. Je kunt niet alleen klassen maken, maar ook complexe overervingshiërarchieën opbouwen, wat je code flexibeler en onderhoudsvriendelijker maakt.
Samenvatting – De nieuwe klassen-syntaxis in JavaScript: ES6 tot ES13
In deze tutorial heb je geleerd hoe je de nieuwe class-syntaxis in JavaScript van ES6 tot ES13 effectiviteit kunt inzetten. De oude methode van klassenvorming was vaak omslachtig en foutgevoelig, terwijl de nieuwe syntaxis een duidelijke en eenvoudige structuur mogelijk maakt. Daarnaast heb je de basisprincipes van overerving via de extends-syntaxis geleerd, zodat je je klassen verder kunt uitbreiden.
Veelgestelde vragen
Wat is het verschil tussen de oude en de nieuwe class-syntaxis?De oude methode maakt gebruik van constructorfuncties en prototypes, terwijl de nieuwe syntaxis de definitie en het gebruik van klassen vereenvoudigt.
Waarom zou ik de nieuwe class-syntaxis moeten gebruiken?Het biedt een duidelijkere, compactere en intuïtieve manier om klassen te definiëren, wat het onderhoud en de leesbaarheid van de code verbetert.
Hoe werkt overerving met de class-syntaxis?Je klasse kan de functionaliteiten van een andere klasse overnemen met het extends-sleutelwoord door de constructor van de ouderklasse aan te roepen met super().
