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