JavaScript har utviklet seg betydelig gjennom årene. Spesielt med introduksjonen av ES6 har programmering med klasser blitt mye enklere. Den gamle metoden for å opprette klasser ved hjelp av prototype og konstruktørfunksjoner var ofte klønete og feilutsatt. I denne veiledningen vil du lære hvordan du effektivt kan bruke den nye class-syntaksen og hvilke forskjeller det er mellom den gamle og den nye skrivemåten. Du vil også lære hvordan du kan utvide klasserstrukturen din gjennom arv.
Viktigste funn
- Den nye class-syntaksen gir en klarere og mer kompakt definisjonsform.
- Bruken av konstruktører er enklere og krever ikke separate prototyper.
- Funksjonaliteten bak class-syntaksen forblir prototypebasert.
Trinn-for-trinn veiledning
1. Forstå den gamle skrivemåten
For å erkjenne fordelene med den nye klassen syntaksen, ser vi først på den gamle metoden. Her opprettet man en konstruktørfunksjon og la til metodene via prototypen.
Når du ønsker å opprette et nytt objekt, skjer dette med new Shape(1, 100, 200). Deretter kan objektet shape brukes til å hente egenskapene.
2. Vise verdiene
For å sikre at vår objektinstans fungerer korrekt, skriver vi ut egenskapene x og y.
3. Introduksjon av den nye class-syntaksen
Nå går vi over til den nye class-syntaksen som har vært tilgjengelig siden ES6.
Endringene er tydelige: Du trenger ikke lenger en separat prototype. I stedet definerer du alle metodene innenfor klassen selv.
4. Opprette objekter med den nye klassen
Opprettelsen av et objekt med den nye syntaksen skjer på samme måte som før. Du bruker new for å opprette en instans av klassen Shape.
5. Bruk av den nye klassen
Bruken av den nydannede klassen er identisk med den gamle metoden. Du kan bruke instansen shape1 for å hente verdiene og bruke move-metoden.
6. Arv i klasser
En annen fordel med class-syntaksen er muligheten for arv. Hvis du ønsker å opprette en ny klasse som arver fra en eksisterende klasse, kan du bruke nøkkelordet extends.
Her kaller konstruktøren til barneklassen super() for å kalle konstruktøren til overklassen. Dette gjør det mulig for deg å bruke egenskapene fra Shape, samtidig som du kan definere unike egenskaper for Rectangle.
7. Konklusjon om class-deklarasjonen
Class-syntaksen gjør ikke bare kodebasen din mer oversiktlig, men tillater også en klarere struktur når du arbeider med objektorienterte konsepter. Du kan ikke bare opprette klasser, men også bygge komplekse arverierarkier, noe som gjør koden din mer fleksibel og vedlikeholdbar.
Oppsummering – Den nye klassen syntaksen i JavaScript: ES6 til ES13
I denne veiledningen har du lært hvordan du effektivt kan bruke den nye class-syntaksen i JavaScript fra ES6 til ES13. Den gamle metoden for klasser var ofte tidkrevende og feilutsatt, mens den nye syntaksen gir en klar og enkel struktur. I tillegg har du lært grunnleggende om arv gjennom extends-syntaksen for å bygge videre på klassene dine.
Ofte stilte spørsmål
Hva er forskjellen mellom den gamle og den nye klassesyntaksen?Den gamle metoden bruker konstruktørfunksjoner og prototyper, mens den nye syntaksen forenkler definisjonen og bruken av klasser.
Hvorfor bør jeg bruke den nye class-syntaksen?Den gir en klarere, mer kompakt og intuitiv måte å definere klasser på, noe som forbedrer vedlikehold og lesbarhet av koden.
Hvordan fungerer arv med class-syntaksen?Klassen din kan overta funksjonaliteten til en annen klasse ved hjelp av extends-nøkkelordet, ved å kalle konstruktøren til overklassen med super().
