JS оператор class
Загальний опис
class — це синтаксична конструкція JavaScript, яка дозволяє створювати шаблони для створення об'єктів. Хоча класи в JavaScript є "цукровою" надбудовою над прототипним наслідуванням, вони забезпечують зрозумілий і організований спосіб роботи з об'єктно-орієнтованим програмуванням.
Клас визначається за допомогою ключового слова class, після якого йде ім'я класу. Всі методи класу автоматично стають доступними для об'єктів, створених із цього класу. Основний метод класу — це constructor, який викликається під час створення нового екземпляра (об'єкта) і задає початкові значення властивостей:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
start() {
console.log(`${this.brand} ${this.model} запускається!`);
}
}
const myCar = new Car('Toyota', 'Corolla');
myCar.start(); // Toyota Corolla запускається!
Класи підтримують статичні методи (static), які доступні лише на самому класі, а не на його екземплярах:
class MathHelper {
static add(a, b) {
return a + b;
}
}
console.log(MathHelper.add(2, 3)); // 5
Також класи можуть наслідувати один одного за допомогою ключового слова extends, що дозволяє створювати ієрархії об'єктів:
class ElectricCar extends Car {
constructor(brand, model, battery) {
super(brand, model);
this.battery = battery;
}
charge() {
console.log(`Заряджаємо батарею ${this.battery} кВтг`);
}
}
const myElectricCar = new ElectricCar('Tesla', 'Model 3', 75);
myElectricCar.charge(); // Заряджаємо батарею 75 кВтг
Класи є основою для побудови масштабованих і організованих додатків.
автор: Bond
- Порада
-
Якщо ваш клас має властивості, що часто не змінюються, використовуйте
автор: BondObject.freezeдля об'єкта-параметра вconstructor, щоб уникнути випадкових змін. - Порада
-
Уникайте створення методів всередині конструктора — це призведе до зайвого споживання пам'яті, оскільки методи не будуть спільними між екземплярами. Використовуйте прототипи (методи класу) для збереження пам'яті.
автор: Bond - Порада
-
Не бійтеся розділяти класи на менші класи з єдиною відповідальністю. Клас з багатьма методами, які не пов'язані між собою, складно підтримувати.
автор: Bond
Синтаксис
class ClassName {
constructor(parameter1, parameter2) {
this.property1 = parameter1;
this.property2 = parameter2;
}
method1() {
// Метод класу
}
static staticMethod() {
// Статичний метод
}
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 49 | 45 | 10.1 | 36 | 13 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 49 | 49 | 45 | 10.3 |
| Переглядач |  |
 |
|---|---|---|
| 6.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє використання класів для реалізації системи авторизації та приватних полів для безпечного зберігання паролів.
class User {
constructor(username, password) {
this.username = username;
this.#password = password; // Приватне поле
}
#password; // Приватна змінна
validatePassword(password) {
return this.#password === password;
}
}
class Admin extends User {
constructor(username, password) {
super(username, password);
}
deleteUser(user) {
console.log(`Користувача ${user.username} видалено!`);
}
}
const admin = new Admin('Admin', 'securepass');
const user = new User('User1', 'mypassword');
console.log(user.validatePassword('wrongpass')); // false
admin.deleteUser(user); // Користувача User1 видалено!Цей приклад показує, як за допомогою класу створювати динамічний список нотаток. Клас NotesApp містить методи для додавання, видалення та відображення нотаток. Користувач взаємодіє зі сторінкою через форму введення і кнопки "Видалити", що дає можливість повністю управляти списком нотаток.
HTML
<header>
<h2 class="title">Клас "NotesApp"</h2>
<p class="description">Реалізує систему управління нотатками з додаванням і видаленням записів.</p>
</header>
<main>
<div class="result">
<!-- Форма для додавання нотатки -->
<form id="note-form">
<label for="note-input">Введіть нотатку:</label>
<input type="text" id="note-input" placeholder="Наприклад, купити молоко" required />
<button type="submit">Додати нотатку</button>
</form>
<!-- Список нотаток -->
<ul id="notes-list" style="margin-top: 15px;"></ul>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
padding: 5px 10px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
li button:hover {
background-color: #c82333;
}JS
class NotesApp {
constructor() {
this.notes = []; // Масив нотаток
}
// Додає нову нотатку
addNote(note) {
this.notes.push(note);
this.renderNotes();
}
// Видаляє нотатку за індексом
deleteNote(index) {
this.notes.splice(index, 1);
this.renderNotes();
}
// Відображає нотатки на сторінці
renderNotes() {
const notesList = document.getElementById('notes-list');
notesList.innerHTML = '';
this.notes.forEach((note, index) => {
const noteItem = document.createElement('li');
noteItem.textContent = note;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Видалити';
deleteButton.addEventListener('click', () => this.deleteNote(index));
noteItem.appendChild(deleteButton);
notesList.appendChild(noteItem);
});
}}
// Ініціалізація програми
const app = new NotesApp();
const form = document.getElementById('note-form');
const input = document.getElementById('note-input');
form.addEventListener('submit', function (event) {
event.preventDefault(); // Забороняємо перезавантаження сторінки
const note = input.value.trim();
if (note) {
app.addNote(note); // Додаємо нотатку
input.value = ''; // Очищуємо поле вводу
}
});
//# sourceURL=pen.jsКлас реалізує кошик покупок з підтримкою знижок, демонструючи наслідування та перевизначення методів.
class Cart {
constructor() {
this.items = [];
}
addItem(item, price) {
this.items.push({ item, price });
}
calculateTotal() {
return this.items.reduce((total, currentItem) => total + currentItem.price, 0);
}
}
class DiscountCart extends Cart {
constructor(discountRate) {
super();
this.discountRate = discountRate;
}
calculateTotal() {
const total = super.calculateTotal();
return total - total * this.discountRate;
}
}
const myCart = new DiscountCart(0.1);
myCart.addItem('Товар 1', 100);
myCart.addItem('Товар 2', 200);
console.log(myCart.calculateTotal()); // 270Коментарі
Коментарів ще немає — будьте першим!