Наследование классов JavaScript
Наследование классов
Чтобы создать наследование класса, используйте extends
ключевое слово.
Класс, созданный с наследованием класса, наследует все методы другого класса:
Пример
Создайте класс с именем «Модель», который наследует методы класса «Автомобиль»:
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;
Чтобы использовать сеттер , используйте тот же синтаксис, что и при установке значения свойства, без круглых скобок:
Пример
Используйте сеттер, чтобы изменить имя автомобиля на «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, объявления классов не поднимаются.
Это означает, что вы должны объявить класс, прежде чем сможете его использовать:
Пример
//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")
Примечание. Для других объявлений, таких как функции, вы НЕ получите сообщение об ошибке, если попытаетесь использовать их до того, как они будут объявлены, потому что поведение объявлений JavaScript по умолчанию — подъем (перемещение объявления наверх).