Arv er et sentralt konsept i objektorientert programmering som lar deg utvide eksisterende klasser og bruke deres egenskaper og metoder. JavaScript har med introduksjonen av ES6 innført en nyere og mer robust syntaks for arv, som er mye enklere å håndtere enn de originale Prototype-metodene. I denne guiden vil jeg vise deg hvordan du bruker arv i JavaScript ved hjelp av nøkkelordet extends, og jeg vil forklare deg trinn for trinn hvordan du korrekt kaller konstruktøren til foreldrekassen med super.
Viktigste funn
- Arv i JavaScript skjer gjennom extends-nøkkelordet.
- Konstruktøren til foreldrekassen må kalles med super.
- Instansvariabler kan refereres til via nøkkelordet this i den avledede klassen.
Trinn-for-trinn-guide
Opprette foreldrekassen
For å starte med arv, oppretter vi først en foreldrekasse kalt Shape. I denne klassen definerer vi konstruktøren samt noen metoder.
Her definerer du en klasse Shape som har en konstruktør. Du kan i denne konstruktøren definere variabler og funksjoner som andre klasser kan få tilgang til.
Utforske underklassen
Etter å ha opprettet foreldrekassen kan du nå opprette en underklasse som arver fra Shape. I dette eksempelet kaller vi den nye klassen ConcreteShape.
I denne underklassen bruker vi extends-nøkkelordet for å angi at ConcreteShape arver fra Shape. Konstruktøren til underklassen kaller konstruktøren til foreldrekassen Shape med super(), som er nødvendig for å implementere arven korrekt.
Instansiering av underklassen
Nå som vi har opprettet underklassen, er det på tide å opprette en instans av denne klassen.
Her oppretter du et nytt objekt myShape av klassen ConcreteShape og sender en beskrivelse til konstruktøren. Deretter kaller du print-metoden som skriver ut beskrivelsen.
Legge til flere egenskaper
Du kan legge til flere egenskaper til din underklasse eller til og med metoder som er spesifikke for denne underklassen.
Her har du utvidet ConcreteShape-klassen ved å legge til ekstra parametere til konstruktøren.
Bruke arven
Med super-nøkkelordet kan du kalle describe-metoden fra foreldrekassen for å kombinere egenskapene til foreldrekassen og underklassen.
Sammendrag – Arv i JavaScript: Fra ES6 til ES13
I denne opplæringen har du lært hvordan arv fungerer i JavaScript, spesielt med den nye class-syntaksen. Du har sett hvordan du definerer klasser, hvordan du arver fra en foreldrekasse, og hvordan du kaller konstruktøren korrekt. Disse mekanismene gjør det lettere for deg å holde kodebasen din ren og vedlikeholdbar ved effektivt å gjenbruke funksjoner.
Ofte stilte spørsmål
Hva er forskjellen mellom super() og this?super() brukes til å kalle konstruktøren til foreldrekassen, mens this refererer til instansen av den aktuelle klassen.
Hvorfor er bruken av ES6-klasser bedre enn prototyper?ES6-klassene tilbyr en klarere og mer intuitiv syntaks som gjør det lettere å lese og forstå koden.
Kan jeg ha flere foreldrekasser?Nei, JavaScript støtter ikke multiarv. En klasse kan bare arve fra en annen klasse.
Hva skjer hvis jeg ikke kaller super()?Hvis du ikke kaller super(), får du en feil fordi konstruktøren til foreldrekassen, som initialiserer det som er nødvendig for klassen, ikke blir utført.
