JavaScript har utvecklats avsevärt genom åren. Särskilt med introduktionen av ES6 har programmering med klasser blivit mycket enklare. Den gamla metoden för att skapa klasser genom prototyper och konstruktionsfunktioner var ofta krånglig och benägen för fel. I den här guiden får du lära dig hur du effektivt kan använda den nya class-syntaxen och vilka skillnader som finns mellan den gamla och den nya skrivstilen. Du kommer också att lära dig hur du kan utöka din klassstruktur genom arv.
Viktigaste insikterna
- Den nya class-syntaxen möjliggör en tydligare och mer kompakt definitionsform.
- Användningen av konstruktörer är enklare och kräver inga separata prototyper.
- Funktionaliteten bakom class-syntaxen förblir prototypbaserad.
Steg-för-steg-guide
1. Förstå den gamla skrivstilen
För att se fördelarna med den nya klass-syntaxen börjar vi med den gamla metoden. Här skapades en konstruktionsfunktion och metoderna lades till via prototypen.
Om du vill skapa ett nytt objekt görs det med new Shape(1, 100, 200). Då kan objektet shape användas för att hämta egenskaperna.
2. Visa värdena
För att säkerställa att vår objektinstans fungerar korrekt skriver vi ut egenskaperna x och y.
3. Introducera den nya class-syntaxen
Nu byter vi till den nya class-syntaxen, som finns tillgänglig från ES6.
Förändringarna är tydliga: Du behöver inte längre en separat prototyp. Istället definierar du alla metoder inom klassen själv.
4. Skapa objekt med den nya klassen
Att skapa ett objekt med den nya syntaxen sker på samma sätt som tidigare. Du använder new för att skapa en instans av klassen Shape.
5. Använd den nya klassen
Användningen av den nyligen definierade klassen är identisk med den gamla metoden. Du kan använda instansen shape1 för att hämta värden och använda move-metoden.
6. Arv i klasser
En annan fördel med class-syntaxen är möjligheten till arv. Om du vill skapa en ny klass som ärver från en befintlig klass kan du använda nyckelordet extends.
I detta fall anropar konstruktorn för underklassen super() konstruktorn för överklassen. Det gör det möjligt för dig att använda egenskaper från Shape och samtidigt definiera unika egenskaper för Rectangle.
7. Slutsats om class-deklarationen
Class-syntaxen gör inte bara din kodbas överskådlig, utan tillåter också en tydligare strukturering vid arbete med objektorienterade koncept. Du kan inte bara skapa klasser, utan också bygga komplexa arvshierarkier, vilket gör din kod mer flexibel och lättare att underhålla.
Sammanfattning – Den nya klass-syntaxen i JavaScript: ES6 till ES13
I den här guiden har du lärt dig hur du effektivt kan använda den nya class-syntaxen i JavaScript från ES6 till ES13. Den gamla metoden för klassbildning var ofta besvärlig och benägen för fel, medan den nya syntaxen möjliggör en tydlig och enkel struktur. Dessutom har du lärt dig grunderna i arv genom extends-syntaxen för att ytterligare utöka dina klasser.
Vanliga frågor
Vad är skillnaden mellan den gamla och nya klass-syntaxen?Den gamla metoden använder konstruktionsfunktioner och prototyper, medan den nya syntaxen förenklar definition och användning av klasser.
Varför ska jag använda den nya class-syntaxen?Den erbjuder ett tydligare, mer kompakt och intuitivt sätt att definiera klasser, vilket förbättrar underhållet och läsbarheten av koden.
Hur fungerar arv med class-syntaxen?Din klass kan överta funktionaliteter från en annan klass genom nyckelordet extends genom att anropa konstruktorn för överklassen med super().
