React ES6 Класи
Класи
ES6 представив класи.
Клас — це тип функції, але замість використання ключового слова function для його ініціювання ми використовуємо ключове слово class, а властивості призначаються всередині методу constructor().
Приклад
Простий конструктор класу:
class Car {
constructor(name) {
this.brand = name;
}
}
Зверніть увагу на регістр імені класу. Ми почали назву "Car" з великої літери. Це стандартна угода про іменування класів.
Тепер ви можете створювати об’єкти за допомогою класу Car.
Приклад
Створіть об’єкт під назвою "mycar" на основі класу Car:
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Ford");
Примітка: Функція-конструктор викликається автоматично під час ініціалізації об’єкта.
Метод у класах
Ви можете додати власні методи до класу:
Приклад
Створіть метод з назвою "present":
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
Як ви можете бачити в наведеному вище прикладі, ви викликаєте метод, посилаючись на ім’я методу об’єкта, за яким йдуть круглі дужки (параметри міститимуться в дужках).
Успадкування (наслідування) класу
Щоб створити успадкування класу, використовуйте ключове слово extends.
Клас, створений за допомогою успадкування класу, успадковує всі методи від іншого класу:
Приклад
Створіть клас під назвою "Model", який успадкує методи класу "Car":
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();
Метод super() посилається на батьківський клас.
Викликаючи метод super() у методі-конструкторі, ми викликаємо батьківський метод-конструктор і отримуємо доступ до батьківських властивостей і методів.
Щоб дізнатися більше про класи, перегляньте розділ JavaScript Класи на нашому сайті W3Schools українською.
