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.
Метод конструктора викликається автоматично, коли створюється новий об’єкт.
Метод конструктора
Метод конструктора є спеціальним методом:
- Він повинен мати точну назву "constructor"
- Виконується автоматично, коли створюється новий об’єкт
- Використовується для ініціалізації властивостей об’єкта
Якщо ви не визначите метод конструктора, 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 =
"My car is " + myCar.age() + " years old.";
Спробуйте самі »
Ви можете надсилати параметри методам класу:
Приклад
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=
"My car is " + myCar.age(year) + " years old.";
Спробуйте самі »
Підтримка браузерами
У наведеній нижче таблиці визначено першу версію браузера з повною підтримкою класів у JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"use strict" / "строгий режим"
Синтаксис у класах має бути написаний у "строгому режимі".
Ви отримаєте повідомлення про помилку, якщо не дотримуєтеся правил "строгого режиму".
Приклад
У "строгому режимі" ви отримаєте повідомлення про помилку, якщо ви використовуєте змінну без її оголошення:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // Це не спрацює
let date = new Date(); // Це спрацює
return date.getFullYear() - this.year;
}
}
Спробуйте самі »
Дізнайтеся більше про "strict mode" / "строгий режим" в розділі: JS Строгий режим на нашому сайті W3Schools українською.
