Пошук уроків, статей та іншого контенту
Створите клас із конструктором і навчитеся ініціалізувати властивості нових екземплярів.
Клас — це шаблон для створення об’єктів з однаковою структурою та поведінкою.
Наприклад, можна описати клас User, а потім створити на його основі кілька користувачів:
class User {
sayHello() {
console.log("Привіт!");
}
}
const firstUser = new User();
const secondUser = new User();
firstUser.sayHello();
secondUser.sayHello();У цьому прикладі:
class User оголошує клас із назвою User;
sayHello() — метод класу;
new User() створює новий екземпляр класу;
firstUser і secondUser — два незалежні об’єкти, створені за одним шаблоном.
Назви класів зазвичай записують у форматі PascalCase: User, Product, BankAccount.
Конструктор — це спеціальний метод класу, який автоматично викликається під час створення нового екземпляра.
Він має назву constructor і використовується для початкового налаштування об’єкта:
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new User("Олена", 25);
console.log(user.name); // Олена
console.log(user.age); // 25Коли виконується цей рядок:
const user = new User("Олена", 25);JavaScript:
створює новий об’єкт;
викликає його конструктор;
передає конструктору значення "Олена" і 25;
зберігає їх у властивостях name та age;
повертає створений об’єкт.
thisУсередині конструктора this посилається на новий об’єкт, який зараз створюється.
class Product {
constructor(title, price) {
this.title = title;
this.price = price;
}
}
const product = new Product("Книга", 300);
console.log(product.title); // Книга
console.log(product.price); // 300У виразі:
this.title = title;this.title — властивість нового об’єкта;
title — параметр конструктора;
значення параметра записується у властивість об’єкта.
Назви параметрів і властивостей можуть відрізнятися:
class Product {
constructor(productName, productPrice) {
this.title = productName;
this.price = productPrice;
}
}
const product = new Product("Навушники", 1500);
console.log(product.title); // Навушники
console.log(product.price); // 1500Проте однакові назви часто роблять код зрозумілішим:
this.title = title;newЩоб створити об’єкт на основі класу, використовують оператор new:
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
}
const firstCar = new Car("Toyota", "червоний");
const secondCar = new Car("Ford", "синій");
console.log(firstCar);
console.log(secondCar);Кожен екземпляр має власні значення властивостей:
console.log(firstCar.brand); // Toyota
console.log(firstCar.color); // червоний
console.log(secondCar.brand); // Ford
console.log(secondCar.color); // синійЗміна властивості одного екземпляра не змінює інший:
firstCar.color = "зелений";
console.log(firstCar.color); // зелений
console.log(secondCar.color); // синійКлас може містити не лише властивості, а й методи. Методи описують дії, які можуть виконувати екземпляри класу.
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
}
showBalance() {
console.log(`${this.owner}: ${this.balance} грн`);
}
}
const account = new BankAccount("Андрій", 1000);
account.showBalance(); // Андрій: 1000 грн
account.deposit(500);
account.showBalance(); // Андрій: 1500 грнМетод deposit змінює властивість balance конкретного екземпляра. Метод showBalance виводить інформацію про рахунок.
Параметрам конструктора можна задати значення за замовчуванням:
class User {
constructor(name, role = "user") {
this.name = name;
this.role = role;
}
}
const regularUser = new User("Олена");
const adminUser = new User("Максим", "admin");
console.log(regularUser.role); // user
console.log(adminUser.role); // adminЯкщо під час створення об’єкта не передати другий аргумент, використовується значення "user".
Конструктор може не мати параметрів. У такому разі він може встановлювати початкові значення самостійно:
class Counter {
constructor() {
this.value = 0;
}
increase() {
this.value += 1;
}
}
const counter = new Counter();
counter.increase();
counter.increase();
console.log(counter.value); // 2Якщо в класі взагалі не оголосити конструктор, JavaScript автоматично створить порожній конструктор:
class EmptyObject {
}
const object = new EmptyObject();
console.log(object); // EmptyObject {}На практиці конструктор додають тоді, коли екземпляру потрібно встановити початкові властивості.
Нижче наведено приклад класу Book, який зберігає інформацію про книгу та має метод для виведення опису:
class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
describe() {
console.log(
`"${this.title}" — ${this.author}, ${this.year} рік`
);
}
}
const firstBook = new Book(
"Кобзар",
"Тарас Шевченко",
1840
);
const secondBook = new Book(
"Лісова пісня",
"Леся Українка",
1911
);
firstBook.describe();
// "Кобзар" — Тарас Шевченко, 1840 рік
secondBook.describe();
// "Лісова пісня" — Леся Українка, 1911 рікЦей код можна запустити в консолі браузера або у файлі JavaScript за допомогою Node.js.
constructorКонструктор повинен називатися саме constructor:
class User {
constructor(name) {
this.name = name;
}
}Метод із назвою User або іншою назвою не буде конструктором класу.
thisЯкщо не використати this, властивість не буде записана в екземпляр:
class User {
constructor(name) {
name = name;
}
}
const user = new User("Олена");
console.log(user.name); // undefinedПравильний варіант:
class User {
constructor(name) {
this.name = name;
}
}newКлас потрібно викликати з оператором new:
class User {
constructor(name) {
this.name = name;
}
}
const user = new User("Олена");Виклик без new призведе до помилки:
const user = User("Олена"); // TypeErrorJavaScript розрізняє великі та малі літери:
class User {
}
const user = new User();User і user — різні ідентифікатори. Також назва класу має точно збігатися під час створення екземпляра.
Клас — це шаблон:
class User {
}Екземпляр — це конкретний об’єкт, створений на основі класу:
const user = new User();Властивості конкретного користувача потрібно читати з екземпляра, а не з назви класу.
Створіть клас Student, який:
приймає в конструкторі ім’я студента та назву курсу;
зберігає їх у властивостях name і course;
має метод introduce, що виводить повідомлення про студента;
створює щонайменше два екземпляри класу;
викликає метод introduce для кожного екземпляра.
Очікуваний формат повідомлення:
Мене звати Олена, я навчаюся на курсі JavaScript.Клас оголошують за допомогою ключового слова class.
Конструктор має спеціальну назву constructor.
Конструктор автоматично викликається під час створення екземпляра.
Оператор new створює новий екземпляр класу.
this посилається на поточний екземпляр.
Властивості екземпляра ініціалізують у конструкторі.
Методи класу описують поведінку його екземплярів.
Кожен екземпляр має власні значення властивостей.