JavaScript har gennem årene udviklet sig betydeligt. Især med introduktionen af ES6 blev programmering med klasser meget lettere. Den gamle metode til at oprette klasser via prototyper og konstruktørfunktioner var ofte besværlig og fejlbehæftet. I denne tutorial lærer du, hvordan du effektivt kan bruge den nye class-syntax, og hvilke forskelle der er mellem den gamle og den nye skrivestil. Derudover vil du lære, hvordan du kan udvide din klasse struktur gennem arv.
Vigtigste indsigter
- Den nye class-syntax muliggør en klarere og mere kompakt definitionsform.
- Brugen af konstruktører er enklere og kræver ikke separate prototyper.
- Funktionaliteten bag class-syntaxen forbliver prototypebaseret.
Trin-for-trin vejledning
1. Forstå den gamle skrivemåde
For at forstå fordelene ved den nye klasse-syntax, ser vi først på den gamle metode. Her blev der oprettet en konstruktørfunktion, og metoderne blev tilføjet via prototypen.
Når du vil oprette et nyt objekt, sker det med new Shape(1, 100, 200). Derefter kan objektet shape bruges til at hente egenskaberne.
2. Vise værdierne
For at sikre, at vores objektinstans fungerer korrekt, udskriver vi egenskaberne x og y.
3. Introducere den nye class-syntax
Nu skifter vi til den nye class-syntax, der er tilgængelig fra ES6.
Ændringerne er tydelige: Du har ikke længere brug for en separat prototype. I stedet definerer du alle metoder inde i klassen selv.
4. Oprette objekter med den nye klasse
Oprettelsen af et objekt med den nye syntax sker på samme måde som før. Du bruger new til at oprette en instans af klassen Shape.
5. Brug af den nye klasse
Brugen af den nyligt definerede klasse er identisk med den gamle metode. Du kan bruge instansen shape1 til at hente værdierne og anvende move-metoden.
6. Arv i klasser
En anden fordel ved class-syntaxen er muligheden for arv. Hvis du vil oprette en ny klasse, der arver fra en eksisterende klasse, kan du bruge nøgleordet extends.
I denne forbindelse kalder konstruktøren for børneklassen super() konstruktøren for forældreklassen. Dette giver dig mulighed for at bruge egenskaberne fra Shape og samtidig definere unikke egenskaber for Rectangle.
7. Konklusion om class-deklarationen
Class-syntaxen gør din kodebase ikke kun mere overskuelig, men tillader også en klarere struktur, når du arbejder med objektorienterede koncepter. Du kan ikke kun oprette klasser, men også opbygge komplekse arvehierarkier, hvilket gør din kode mere fleksibel og vedligeholdelsesvenlig.
Opsummering – Den nye klasse-syntax i JavaScript: ES6 til ES13
I denne tutorial har du lært, hvordan du effektivt kan anvende den nye class-syntax i JavaScript fra ES6 til ES13. Den gamle metode til klasseoprettelse var ofte besværlig og fejlbehæftet, mens den nye syntax muliggør en klar og enkel struktur. Derudover har du lært grundlæggende arv gennem extends-syntaxen for bedre at kunne udvide dine klasser.
Ofte stillede spørgsmål
Hvad er forskellen mellem den gamle og den nye klasse-syntax?Den gamle metode bruger konstruktørfunktioner og prototyper, mens den nye syntax forenkler definition og brug af klasser.
Hvorfor skal jeg bruge den nye class-syntax?Den tilbyder en klarere, mere kompakt og intuitiv måde at definere klasser på, hvilket forbedrer vedligeholdelsen og læsbarheden af koden.
Hvordan fungerer arv med class-syntaxen?Din klasse kan overtage funktionaliteten fra en anden klasse ved hjælp af extends-nøgleordet, når du kalder forældreklassens konstruktør med super().
