JavaScript Наследование класса
Наследование класса
Чтобы создать наследование класса, используйте extends ключевое слово.
Класс, созданный с помощью наследования классов, наследует все методы другого класса:
Пример
Создайте класс с именем "Model", который унаследует методы от класса "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();
Метод super() относится к родительскому классу.
Вызывая super() метод в методе конструктора, мы вызываем метод конструктора родителя и получаем доступ к свойствам и методам родителя.
Наследование полезно для повторного использования кода: повторно используйте свойства и методы существующего класса при создании нового класса.
Геттеры и сеттеры
Классы также позволяют использовать геттеры и сеттеры.
Было бы разумно использовать геттеры и сеттеры для ваших свойств, особенно если вы хотите сделать что-то особенное со значением перед их возвратом или перед их установкой.
Для того, чтобы добавить методы гетер и сеттер в классе, использовать get и set ключевые слова.
Пример
Создайте геттер и сеттер для свойства "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;
Примечание: даже если получателем является метод, вы не используете круглые скобки, когда хотите получить значение свойства.
В этом случае имя метода гетер/сеттер не может совпадать с именем свойства carname.
Многие программисты используют символ подчеркивания _ перед именем свойства, чтобы отделить метод гетер/сеттер от фактического свойства:
Пример
Вы можете использовать символ подчеркивания, чтобы отделить геттер/сеттер от фактического свойства:
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;
Чтобы использовать setter, используйте тот же синтаксис, что и при установке значения свойства, без скобок:
Пример
Используйте сеттер, чтобы изменить имя машины на "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;
Подъем
В отличие от функций и других объявлений JavaScript, объявления классов не поднимаются.
Это означает, что вы должны объявить класс, прежде чем сможете его использовать:
Пример
// Вы пока не можете использовать этот класс.
//myCar = new Car("Ford")
// Это вызовет ошибку..
class Car {
constructor(brand) {
this.carname = brand;
}
}
// Теперь вы можете использовать класс::
let myCar = new Car("Ford")
Попробуйте сами »
Примечание: Для других объявлений, таких как функции, вы НЕ получите сообщение об ошибке, если попытаетесь использовать его до объявления, потому что по умолчанию объявления JavaScript поднимаются (перемещение объявления вверх).
