JavaScript Class Inheritance

Klasseløsning

For at oprette klasseløsning, brug extends Nøgleord.

Klasser oprettet ved klasseløsning arver alle metoder fra en anden klasse:

Eksempel

Opret en klasse kaldet "Model", som arver metoder fra "Car" klasse:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Jeg har en ' + this.carname;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', det er en ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Prøv det selv

super() metoden refererer til overklassen.

Ved at kalde super() Metoder, vi kaldte forældrepunktden konstruktørmetode, fik adgang til forældrepunktden egenskaber og metoder.

Arv er nyttigt for kodegenbrug: Genbrug eksisterende klassers egenskaber og metoder, når du opretter en ny klasse.

Getter og Setter

Klassen tillader også brug af getter og setter.

Det er klogt at bruge getter og setter til dine egenskaber, især hvis du vil gøre noget specielt med værdien, før du returnerer den eller sætter den.

For at tilføje getter og setter i en klasse, skal du bruge get og set Nøgleord.

Eksempel

Opret getter og setter for "carname"-egenskaben:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Prøv det selv

Bemærk:Selvom getter er en metode, skal du ikke bruge parentes, når du vil hente egenskabsværdien.

Navnet på getter/setter-metoden må ikke være det samme som egenskabsnavnet, i dette tilfælde carname.

Mange programmører bruger understregstegn _ foran egenskabsnavnet for at adskille getter/setter fra den faktiske egenskab:

Eksempel

Du kan bruge understregstegn for at adskille getter/setter fra den faktiske egenskab:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Prøv det selv

Brug samme syntaks som til at sætte egenskabsværdien, uden parentes:

Eksempel

Brug sætter til at ændre bilnavnet til "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Prøv det selv

Hoisting

I modsætning til funktioner og andre JavaScript-erklæringer bliver klasseerklæringer ikke hoisted.

Dette betyder, at du først skal erklære klassen, før du kan bruge den:

Eksempel

//Du kan endnu ikke bruge klassen.
//myCar = new Car("Ford")
//Dette ville give en fejl.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Nu kan du bruge klassen:
let myCar = new Car("Ford")

Prøv det selv

Bemærk:For andre erklæringer, såsom funktioner, vil der ikke opstå fejl, når du forsøger at bruge det før erklæringen, fordi JavaScripts standardopførsel er hoisting (flyt erklæringen til toppen).