For at oprette en klassearv skal du bruge udvidelserne søgeord.
En klasse oprettet med en klassearv arver alle metoderne fra en anden klasse:
Opret en klasse ved navn "Model", som vil arve metoderne fra "Bil" klasse:
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();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>
<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>
<p id="demo"></p>
<script>
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;
}
}
const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
Metoden super() refererer til forælderen klasse.
Ved at kalde super() metoden i konstruktørmetode, kalder vi forælderens konstruktørmetode og får adgang til forælderens egenskaber og metoder.
Nedarvning er nyttig til genbrug af kode: genbrug egenskaber og metoder for en eksisterende klasse, når du opretter en ny klasse.
Klasser giver dig også mulighed for at bruge getters og settere.
Det kan være smart at bruge gettere og sættere til dine ejendomme, især hvis du vil gøre noget særligt med værdien, før du returnerer dem, eller før du sætter dem.
Brug for at tilføje gettere og sættere i klassen få og angiv søgeord.
Opret en getter og en setter for egenskaben "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
Bemærk: selvom getteren er en metode, bruger du ikke parenteser, når du ønsker at få ejendomsværdien.
Navnet på getter/setter-metoden kan ikke være det samme som navnet på egenskab, i dette tilfælde carname.
<p>Mange programmører bruger et understregningstegn _ før ejendomsnavnet for at adskille getter/setter fra den faktiske ejendom:
Du kan bruge understregningstegn til at adskille getter/setter fra faktisk ejendom:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
For at bruge en setter skal du bruge den samme syntaks, som når du angiver en egenskabsværdi uden parentes:
Brug en 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;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
I modsætning til funktioner og andre JavaScript-erklæringer, hejses klasseerklæringer ikke.
Det betyder, at du skal erklære en klasse, før du kan bruge den:
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car { constructor(brand) {
this.carname = brand; }
}
//Now you can use the class:
const myCar = new Car("Ford")Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Bemærk: For andre erklæringer, f.eks. funktioner, får du IKKE en fejl, når du forsøger at bruge det, før det er erklæret, fordi standardadfærden af JavaScript-erklæringer løftes (flytter erklæringen til toppen).