JavaScript-klasse-overerving
Klasse Overerving
Gebruik het extends
trefwoord om een klasse-overerving te maken.
Een klasse die is gemaakt met een klasse-overerving, erft alle methoden van een andere klasse:
Voorbeeld
Maak een klasse met de naam "Model" die de methoden van de klasse "Car" erft:
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + 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();
De super()methode verwijst naar de bovenliggende klasse.
Door de super()methode aan te roepen in de constructormethode, roepen we de constructormethode van de ouder aan en krijgen we toegang tot de eigenschappen en methoden van de ouder.
Overerving is handig voor herbruikbaarheid van code: hergebruik eigenschappen en methoden van een bestaande klasse wanneer u een nieuwe klasse maakt.
Getters en setters
Met klassen kun je ook getters en setters gebruiken.
Het kan slim zijn om getters en setters voor uw eigendommen te gebruiken, vooral als u iets speciaals met de waarde wilt doen voordat u ze teruggeeft of voordat u ze instelt.
Gebruik de trefwoorden
geten om getters en setters in de klas toe te voegen.set
Voorbeeld
Maak een getter en een setter voor de eigenschap "carname":
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;
Opmerking: zelfs als de getter een methode is, gebruik je geen haakjes als je de eigenschapswaarde wilt krijgen.
De naam van de getter/setter-methode mag niet hetzelfde zijn als de naam van de eigenschap, in dit geval carname.
Veel programmeurs gebruiken een onderstrepingsteken _
voor de eigenschapnaam om de getter/setter van de eigenlijke eigenschap te scheiden:
Voorbeeld
U kunt het onderstrepingsteken gebruiken om de getter/setter van de eigenlijke eigenschap te scheiden:
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;
Om een setter te gebruiken , gebruikt u dezelfde syntaxis als wanneer u een eigenschapswaarde instelt, zonder haakjes:
Voorbeeld
Gebruik een setter om de autonaam te wijzigen in "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;
Hijsen
In tegenstelling tot functies en andere JavaScript-declaraties, worden class-declaraties niet gehesen.
Dat betekent dat je een klasse moet declareren voordat je deze kunt gebruiken:
Voorbeeld
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Opmerking: voor andere declaraties, zoals functies, krijgt u GEEN foutmelding wanneer u deze probeert te gebruiken voordat deze is gedeclareerd, omdat het standaardgedrag van JavaScript-declaraties hijsen is (de declaratie naar boven verplaatsen).