JavaScript Klassinheritans

Klassinherkning

För att skapa klassinherkning, använd: extends Nyckelord.

Klasser som skapas genom klassinherkning tar över alla metoder från en annan klass:

Exempel

Skapa en klass som heter "Model" som kommer att ärva metoder från "Car"-klassen:

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

Prova själv

super() metoden refererar vi till förälderklassen.

Genom att anropa super() Metoder, vi anropade förälders constructor-metod och fick åtkomst till förälders egenskaper och metoder.

Arv är användbart för kodåteranvändning: använd befintliga klassers egenskaper och metoder när du skapar en ny klass.

Getter och Setter

Klassen tillåter också att du använder getter och setter.

Det är smart att använda getter och setter för dina egenskaper, särskilt om du vill göra något speciellt med värdet innan eller efter att du returnerar det.

Om du vill lägga till getter och setter i en klass, använd get och set Nyckelord.

Exempel

Skapa getter och setter för "carname"-egenskapen:

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;

Prova själv

Kommentar:Även om getter är en metod, använd inte parenteser när du vill hämta egenskapsvärdet.

Namnet på getter/setter-metoden får inte vara detsamma som egenskapsnamnet, i detta fall är carname.

Många programmerare använder understrecksymbolen _ före egenskapsnamnet för att skilja getter/setter från den faktiska egenskapen:

Exempel

Du kan använda understrecksymbolen för att skilja getter/setter från den faktiska egenskapen:

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;

Prova själv

Om du vill använda setter, använd samma syntax som att sätta egenskapsvärdet, utan parenteser:

Exempel

Använda setter för att ändra bilnamnet till "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;

Prova själv

Höjning

Och skillnaden från funktioner och andra JavaScript-deklarationer är att klassdeklarationer inte höjs.

Detta innebär att du måste deklarera klassen innan du kan använda den:

Exempel

//Du kan fortfarande inte använda klassen.
//myCar = new Car("Ford")
//Detta skulle orsaka ett fel.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Nu kan du använda klassen:
let myCar = new Car("Ford")

Prova själv

Kommentar:För andra deklarationer, som funktioner, uppstår det inget fel när du försöker använda dem innan de deklarerats, eftersom JavaScripts standardbeteende är höjning (flyttar deklarationen till toppen).