JavaScript Класи
В ECMAScript 2015, також відомом як ES6, з’явились JavaScript класи.
JavaScript класи - це шаблони для об’єктів JavaScript.
Синтаксис JavaScript класу
Використовуйте ключове слово class для створення класу.
Завжди додавайте метод з іменем constructor():
Синтаксис
class ClassName {
constructor() { ... }
}
Приклад
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В наведеному вище прикладі створюється клас з іменем "Car".
Клас має дві початкових властивості: "name" ("ім’я") та "year" ("рік").
JavaScript клас не є об’єктом.
Він є шаблоном для JavaScript об’єктів.
Використання класу
Коли є клас, ви можете використовувати його для створення об’єктів:
В наведеному вище прикладі використовується клас Car для створення двох об’єктів Car.
Метод конструктора викликається автоматично при створенні нового об’єкта.
Метод конструктора
Метод конструктора - це особливий метод:
- У нього має бути точне ім’я "конструктор"
- Він виконується автоматично при створенні нового об’єкта
- Він використовується для ініціалізації властивостей об’єкта
Якщо ви не вказуєте метод конструктора, JavaScript додасть пустий метод конструктора.
Методи класу
Методи класу створюються з тим же синтаксисом, що і методи об’єкту.
Використовуйте ключове слово class для створення класу.
Завжди додавайте метод constructor().
Потім додайте будь-яку кількість методів.
Синтаксис
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Створіть метод класу з іменем "age" ("вік"), який повертає вік автомобіля:
Приклад
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Моєму автомобілю " + myCar.age() + " років.";
Ви можете відправляти параметри в методи класу:
Приклад
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Моему автомобилю " + myCar.age(year) + " лет.";
Спробуйте самі »
Підтримка браузерами
В наступній таблиці визначається перша версія браузера з повною підтримкою класів в JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Ви дізнаєтесь більше про JavaScript класи пізніше в цьому підручнику на нашому сайті W3Schools українською.
