Subklasser og arv

Noen ganger har vi behov for å ha flere varianter av et objekt. I klassen Bil, som vi opprettet i artikkelen "Objekter og klasser", vil vi kanskje også legge til muligheten for å legge inn elbiler, og da trenger vi gjerne noe mer informasjon, som batterikapasitet og batteristatus. Disse objektvariablene vil ikke være relevante for fossildrevne biler. Da kan vi lage en annen variant av klassen Bil, som vi kaller Elbil. Denne klassen kan ha alle de samme objektvariablene og metodene som klassen Bil, men vil i tillegg ha sine egne objektvariabler og metoder. Vi kan opprette denne nye klassen som en subklasse av klassen Bil, slik:

1class Elbil extends Bil {
2
3  constructor(bilmerke, modell, farge, toppfart, 
4    fart, batterikapasitet, batteristatus) {
5    super(bilmerke, modell, farge, toppfart, fart);
6    this.batterikapasitet = batterikapasitet;
7    this.batteristatus = batteristatus;
8  }
9  
10  lading() {
11    this.batteristatus = this.batteristatus + 10;
12  }
13  
14}

Vi kan se at Elbil er en subklasse av Bil ved å se på den første linja, der det står class Elbil extends Bil. Dette betyr at Elbil er en utvidelse av Bil. I første linje i konstruktøren henter vi objektvariablene fra superklassen Bil, før vi setter objektvariablene som er spesifikke for Elbil (batterikapasitet og batteristatus).

Vi lager også en metode som er spesifikk for elbiler, nemlig lading. Elbil-klassen arver alle andre metoder fra klassen Bil, så metodene presenter() og giGass() kan også brukes med Elbil-objekter. Metoden lading() kan imidlertid ikke brukes av Bil-objekter.

Vi kan lage ei liste med både Bil- og Elbil-objekter:

1const biler = [];
2biler.push( new Bil("Porsche", "911", "svart", 290, 0) );                  //biler[0]
3biler.push( new Bil("Ferrari", "F8 Spider", "rød", 340, 0) );              //biler[1]
4biler.push( new Bil("Ford", "Mustang Mach 1", "blå", 270, 0) );            //biler[2]
5biler.push( new Elbil("Ford", "Mustang Mach e", "grå", 180, 0, 68, 100) ); //biler[3]
6biler.push( new Elbil("Tesla", "Model 3", "hvit", 260, 0, 50, 70) );       //biler[4]

Vi kan skrive ut informasjon om alle bilene med ei for-løkke eller ei for...of-løkke. Les mer om for...of-setninger på nettstedet MDN Web Docs.

1//for
2for(let i = 0; i < biler.length; i++) {
3  console.log( biler[i].presenter() );
4}
5
6//for...of
7for(let bil of biler) {
8  console.log( bil.presenter() );
9}

Da kjøres presenter()-metoden fra Bil-klassen på alle objektene i lista, som skriver ut bilmerke, modell, farge, toppfart og nåværende fart for alle bilene. Den skriver ikke ut batterikapasitet eller ladestatus for elbilene, siden dette er ikke spesifisert i presenter()-metoden. Hvis vi endrer på presenter()-metoden i Bil-klassen for å ha med dette, vil vi få et problem når vi skal presentere fossildrevne biler, som ikke har denne informasjonen. Løsningen blir å lage en metode i subklassen Elbil, som skriver ut all informasjonen for elbiler.

1class Elbil extends Bil {
2
3  constructor(bilmerke, modell, farge, toppfart, 
4    fart, batterikapasitet, batteristatus) {
5    super(bilmerke, modell, farge, toppfart, fart);
6    this.batterikapasitet = batterikapasitet;
7    this.batteristatus = batteristatus;
8  }
9  
10  lading() {
11    this.batteristatus = this.batteristatus + 10;
12  }
13  
14  presenter() {
15    return `Denne bilen er en ${this.farge} ${this.bilmerke} ${this.modell}, \
16med en toppfart på ${this.toppfart} km/h og \
17batterikapasitet på ${this.batterikapasitet} kWh. \
18Akkurat nå har den en fart på ${this.fart} km/h, \
19og batteriet er ladet ${this.batteristatus} %.`
20//Vi bruker linjeskift i koden for å forbedre lesbarheten.
21//Backslash \ brukes for å unngå at det blir linjeskift i utskriften.
22  }
23
24}

console.log(biler[4].presenter); vil da gi denne utskriften: