Subklassar og arv

Nokre gonger har vi behov for å ha fleire variantar av eit objekt. I klassen Bil, som vi oppretta i artikkelen "Objekt og klassar", vil vi kanskje òg legge til moglegheita for å legge inn elbilar, og då treng vi gjerne litt meir informasjon, som batterikapasitet og batteristatus. Desse objektvariablane vil ikkje vere relevante for fossildrivne bilar. Då kan vi lage ein annan variant av klassen Bil, som vi kallar Elbil. Denne klassen kan ha alle dei same objektvariablane og metodane som klassen Bil, men vil i tillegg ha sine eigne objektvariablar og metodar. Vi kan opprette denne nye klassen som ein 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 sjå at Elbil er ein subklasse av Bil ved å sjå på den første linja, der det står class Elbil extends Bil. Dette betyr at Elbil er ei utviding av Bil. I første linje i konstruktøren hentar vi objektvariablane frå superklassen Bil, før vi set objektvariablane som er spesifikke for Elbil (batterikapasitet og batteristatus).

Vi lagar òg ein metode som er spesifikk for elbilar, nemleg lading. Elbil-klassen arvar alle andre metodar frå klassen Bil, så metodane presenter() og giGass() kan òg brukast med Elbil-objekt. Metoden lading() kan likevel ikkje brukast av Bil-objekt.

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

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

Vi kan skrive ut informasjon om alle bilane med ei for-lykkje eller ei for...of-lykkje. Les meir om for...of-setningar på nettstaden MDN Web Docs.

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

Då blir presenter()-metoden køyrd frå Bil-klassen på alle objekta i lista, som skriv ut bilmerke, modell, farge, toppfart og noverande fart for alle bilane. Han skriv ikkje ut batterikapasitet eller ladestatus for elbilane, sidan dette er ikkje spesifisert i presenter()-metoden. Dersom vi endrar på presenter()-metoden i Bil-klassen for å ha med dette, vil vi få eit problem når vi skal presentere fossildrivne bilar, som ikkje har denne informasjonen. Løysinga blir å lage ein metode i subklassen Elbil, som skriv ut all informasjonen for elbilar.

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 ein ${this.farge} ${this.bilmerke} ${this.modell}, \
16med ein toppfart på ${this.toppfart} km/h og \
17batterikapasitet på ${this.batterikapasitet} kWh. \
18Akkurat no har han ein fart på ${this.fart} km/h, \
19og batteriet er lada ${this.batteristatus} %.`
20//Vi bruker linjeskift i koden for å betre lesbarheita.
21//Backslash \ bruker vi for å unngå at det blir linjeskift i utskrifta.
22  }
23
24}

console.log(bilar[4].presenter); vil då gi denne utskrifta: