Arv er et centralt begreb inden for objektorienteret programmering, som giver dig mulighed for at udvide eksisterende klasser og bruge deres egenskaber samt metoder. JavaScript har med introduktionen af ES6 indført en nyere og mere robust syntaks for arv, som er meget nemmere at håndtere end de oprindelige prototype-metoder. I denne guide vil jeg vise dig, hvordan du anvender arv i JavaScript ved hjælp af nøgleordet extends, og jeg vil trin for trin forklare, hvordan du korrekt kalder konstruktøren for basisklassen med super.

Vigtigste indsigter

  • Arven i JavaScript sker gennem extends-nøgleordet.
  • Konstruktøren for basisklassen skal kaldes med super.
  • Instansvariable kan refereres til gennem nøgleordet this i den afledte klasse.

Trin-for-trin-guide

Oprettelse af basisklassen

For at begynde med arv opretter vi først en basisklasse kaldet Shape. I denne klasse definerer vi konstruktøren samt nogle metoder.

Her definerer du en klasse Shape, der har en konstruktør. Du kan i denne konstruktør definere variable og funktioner, som andre klasser kan få adgang til.

Arv i JavaScript: Med ES6 til moderne klasser

Udforskning af underklassen

Efter oprettelsen af basisklassen kan du nu oprette en underklasse, der arver fra Shape. I dette eksempel kalder vi den nye klasse ConcreteShape.

I denne underklasse bruger vi extends-nøgleordet for at angive, at ConcreteShape arver fra Shape. Konstruktøren for underklassen kalder konstruktøren for basisklassen Shape med super(), hvilket er nødvendigt for at implementere arven korrekt.

Instansiering af underklassen

Nu hvor vi har oprettet underklassen, er det tid til at oprette en instans af denne klasse.

Her opretter du et nyt objekt myShape af klassen ConcreteShape og overfører en beskrivelse til konstruktøren. Derefter kalder du print-metoden, som viser beskrivelsen.

Tilføjelse af yderligere egenskaber

Du kan tilføje yderligere egenskaber til din underklasse eller endda metoder, der er specifikke for denne underklasse.

Her har du udvidet ConcreteShape-klassen ved at tilføje ekstra parametre til konstruktøren.

Brug af arv

Med super-nøgleordet kan du kalde metoden describe fra basisklassen for at kombinere egenskaberne fra basisklassen og underklassen.

Resumé – Arv i JavaScript: Fra ES6 til ES13

I denne tutorial har du lært, hvordan arv fungerer i JavaScript, især med den nye class-syntaks. Du har set, hvordan du definerer klasser, hvordan du arver fra en basisklasse og hvordan du korrekt kalder konstruktøren. Disse mekanismer gør det lettere for dig at holde din kodebase ren og vedligeholdelig ved effektivt at genbruge funktioner.

Ofte stillede spørgsmål

Hvad er forskellen mellem super() og this?super() bruges til at kalde konstruktøren for basisklassen, mens this refererer til instansen af den aktuelle klasse.

Hvorfor er brugen af ES6-klasser bedre end prototyper?ES6-klasser tilbyder en klarere og mere intuitiv syntaks, som gør det lettere at læse og forstå koden.

Kan jeg have flere basisklasser?Nej, JavaScript understøtter ikke multipel arv. En klasse kan kun arve fra en anden klasse.

Hvad sker der, hvis jeg ikke kalder super()?Hvis du ikke kalder super(), får du en fejl, da konstruktøren for basisklassen, der initialiserer det, der er nødvendigt for klassen, ikke vil blive udført.