Dziedziczenie klas JavaScript
Dziedziczenie klas
Aby utworzyć dziedziczenie klasy, użyj extends
słowa kluczowego.
Klasa utworzona z dziedziczeniem klas dziedziczy wszystkie metody z innej klasy:
Przykład
Utwórz klasę o nazwie „Model”, która odziedziczy metody z klasy „Car”:
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();
Metoda super()
odnosi się do klasy nadrzędnej.
Wywołując super()
metodę w metodzie konstruktora, wywołujemy metodę konstruktora rodzica i uzyskujemy dostęp do właściwości i metod rodzica.
Dziedziczenie jest przydatne w przypadku ponownego wykorzystania kodu: ponowne wykorzystanie właściwości i metod istniejącej klasy podczas tworzenia nowej klasy.
Gettery i setery
Klasy pozwalają również na używanie getterów i seterów.
Używanie getterów i seterów dla swoich właściwości może być sprytne, zwłaszcza jeśli chcesz zrobić coś specjalnego z wartością przed ich zwróceniem lub przed ich ustawieniem.
Aby dodać gettery i settery w klasie, użyj słów kluczowych
get
i .set
Przykład
Utwórz getter i setter dla właściwości „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;
Uwaga: nawet jeśli getter jest metodą, nie używaj nawiasów, gdy chcesz uzyskać wartość właściwości.
Nazwa metody pobierającej/ustawiającej nie może być taka sama jak nazwa właściwości, w tym przypadku carname
.
Wielu programistów używa znaku podkreślenia _
przed nazwą właściwości, aby oddzielić metodę pobierającą/ustawiającą od rzeczywistej właściwości:
Przykład
Możesz użyć znaku podkreślenia, aby oddzielić metodę pobierającą/ustawiającą od rzeczywistej właściwości:
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;
Aby użyć settera , użyj tej samej składni, co podczas ustawiania wartości właściwości, bez nawiasów:
Przykład
Użyj setera, aby zmienić nazwę samochodu na „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;
Podnoszenie
W przeciwieństwie do funkcji i innych deklaracji JavaScript, deklaracje klas nie są podnoszone.
Oznacza to, że musisz zadeklarować klasę, zanim będziesz mógł jej użyć:
Przykład
//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")
Uwaga: W przypadku innych deklaracji, takich jak funkcje, NIE otrzymasz błędu, gdy spróbujesz użyć go przed zadeklarowaniem, ponieważ domyślne zachowanie deklaracji JavaScript to hoisting (przenoszenie deklaracji na górę).