Osztályöröklődés létrehozásához használja a kiterjesztéseket kulcsszó.
Az osztályörökléssel létrehozott osztály az összes metódust örökli másik osztály:
Hozzon létre egy "Model" nevű osztályt, amely örökli a metódusokat az "Car"-tól osztály:
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óbálja ki Ön is →
<!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>
A super() metódus a szülőre hivatkozik osztály.
A super() metódus meghívásával a konstruktor metódus, meghívjuk a szülő konstruktor metódusát, és hozzáférést kap a szülő tulajdonságait és módszereit.
Az öröklődés hasznos a kód újrafelhasználhatósága szempontjából: használja újra egy meglévő osztály tulajdonságait és metódusait, amikor új osztályt hoz létre.
Az osztályok lehetővé teszik getterek és szetterek használatát is.
Okos lehet gettereket és settereket használni a tulajdonságokhoz, különösen, ha valami különlegeset szeretne tenni az értékkel, mielőtt visszaküldi őket, vagy előtte beállítod őket.
Getterek és beállítók hozzáadásához az osztályhoz használja a kap és set kulcsszavakat.
Hozzon létre egy gettert és egy settert a "carname" tulajdonsághoz:
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óbálja ki Ön is →
<!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>
Megjegyzés: még ha a getter egy metódus is, akkor sem használ zárójelet szeretné megszerezni az ingatlan értékét.
A getter/setter metódus neve nem egyezhet meg a nevével tulajdonság, jelen esetben autónév.
<p>Sok programozó használ aláhúzásjelet: _ a tulajdonság neve előtt a getter/setter és a tényleges tulajdonság elválasztásához:
Az aláhúzás karakterrel elválaszthatja a gettert/settert a tényleges ingatlan:
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óbálja ki Ön is →
<!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>
Beállító használatához ugyanazt a szintaxist használja, mint a tulajdonságérték beállításakor, zárójelek nélkül:
Használjon settert az autónév megváltoztatásához "Volvo"-ra:
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óbálja ki Ön is →
<!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>
A függvényekkel és más JavaScript-deklarációkkal ellentétben az osztálydeklarációkat a rendszer nem emeli ki.
Ez azt jelenti, hogy deklarálnia kell egy osztályt, mielőtt használhatná:
//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óbálja ki Ön is →
<!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>
Megjegyzés: Más deklarációk, például függvények esetén NEM kap egy hiba, amikor megpróbálja használni, mielőtt deklarálná, mert az alapértelmezett viselkedés JavaScript-deklaráció emelése (a deklaráció a tetejére kerül).