Arv är ett centralt begrepp inom objektorienterad programmering som möjliggör för dig att utöka befintliga klasser och använda deras egenskaper samt metoder. JavaScript har med introduktionen av ES6 infört en ny och mer robust syntax för arv som är mycket enklare att hantera än de ursprungliga prototype-metoderna. I denna guide kommer jag att visa dig hur du tillämpar arv i JavaScript med hjälp av nyckelordet extends och förklara steg för steg hur du korrekt anropar konstruktorn för basklassen med super.
Viktigaste insikterna
- Arv i JavaScript sker genom nyckelordet extends.
- Konstruktorn för basklassen måste anropas med super.
- Instansvariabler kan refereras genom nyckelordet this i den avledda klassen.
Steg-för-steg-guide
Skapa basklassen
För att börja med arv skapar vi först en basklass som kallas Shape. I denna klass definierar vi konstruktorn samt några metoder.
Här definierar du en klass Shape som har en konstruktor. I denna konstruktor kan du definiera variabler och funktioner som andra klasser kan få åtkomst till.
Utforska subklassen
Efter att ha skapat basklassen kan du nu skapa en subklass som ärver från Shape. I detta exempel kallar vi den nya klassen ConcreteShape.
I denna subklass använder vi nyckelordet extends för att ange att ConcreteShape ärver från Shape. Subklassens konstruktor anropar basklassens konstruktor Shape med super(), vilket är nödvändigt för att korrekt implementera arv.
Instansiera subklassen
Nu när vi har skapat subklassen är det dags att skapa en instans av denna klass.
Här skapar du ett nytt objekt myShape av klassen ConcreteShape och överlämnar en beskrivning till konstruktorn. Sedan anropar du print-metoden som skriver ut beskrivningen.
Lägg till fler egenskaper
Du kan lägga till fler egenskaper till din subklass eller till och med metoder som är specifika för denna subklass.
Här har du utökat ConcreteShape-klassen genom att lägga till ytterligare parametrar till konstruktorn.
Användning av arv
Med super-nyckelordet kan du anropa metoden describe i basklassen för att kombinera egenskaperna hos basklassen och subklassen.
Sammanfattning – Arv i JavaScript: Från ES6 till ES13
I denna tutorial har du lärt dig hur arv fungerar i JavaScript, särskilt med den nya class-syntaxen. Du har sett hur du definierar klasser, hur du ärver från en basklass och hur du korrekt anropar konstruktorn. Dessa mekanismer gör det enklare för dig att hålla din kodbas ren och underhållbar genom att effektivt återanvända funktioner.
Vanliga frågor
Vad är skillnaden mellan super() och this?super() används för att anropa konstruktorn av basklassen, medan this hänvisar till instansen av den aktuella klassen.
Varför är användning av ES6-klasser bättre än prototyper?ES6-klasser erbjuder en tydligare och mer intuitiv syntax som gör det lättare att läsa och förstå koden.
Kan jag ha flera basklasser?Nej, JavaScript stödjer inte multipelt arv. En klass kan bara ärva från en annan klass.
Vad händer om jag inte anropar super()?Om du inte anropar super() kommer du att få ett fel eftersom basklassens konstruktor, som initialiserar det som är nödvändigt för klassen, inte kommer att köras.
