Chcete-li vytvořit dědičnost třídy, použijte rozšíření klíčové slovo.
Třída vytvořená pomocí dědičnosti třídy dědí všechny metody od další třída:
Vytvořte třídu s názvem "Model", která zdědí metody z "Car" třída:
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();Zkuste to sami →
<!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>
Metoda super() odkazuje na rodiče třída.
Voláním metody super() v metodu konstruktoru, zavoláme metodu konstruktoru rodiče a získáme k ní přístup vlastnosti a metody rodiče.
Dědičnost je užitečná pro opětovné použití kódu: při vytváření nové třídy znovu použijte vlastnosti a metody existující třídy.
Třídy také umožňují používat getry a settery.
Může být chytré používat getry a settery pro vaše vlastnosti, zvláště pokud chcete s hodnotou udělat něco zvláštního, než je vrátíte nebo předtím nastavíte je.
Chcete-li do třídy přidat getry a settery, použijte získat a nastavit klíčová slova.
Vytvořte getter a setter pro vlastnost "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;Zkuste to sami →
<!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>
Poznámka: I když je getter metodou, nepoužíváte závorky chcete získat hodnotu nemovitosti.
Název metody getter/setter nemůže být stejný jako název metody vlastnost, v tomto případě carname.
<p>Mnoho programátorů používá podtržítko _ před názvem vlastnosti, abyste oddělili getter/setter od skutečné vlastnosti:
Znak podtržítka můžete použít k oddělení getter/setter od skutečný majetek:
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;Zkuste to sami →
<!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>
Chcete-li použít setter, použijte stejnou syntaxi jako při nastavování hodnoty vlastnosti, bez závorek:
Pomocí setteru změňte název vozu na „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;Zkuste to sami →
<!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>
Na rozdíl od funkcí a jiných deklarací JavaScriptu nejsou deklarace tříd zvednuty.
To znamená, že před použitím musíte třídu deklarovat:
//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")Zkuste to sami →
<!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>
Poznámka: Pro ostatní deklarace, jako jsou funkce, NEZÍSKÁTE při pokusu o použití před deklarací dojde k chybě, protože výchozí chování deklarací JavaScriptu se zvedá (přesouvá deklaraci na začátek).