Пошук уроків, статей та іншого контенту
Розглянете публічні поля класу й навчитеся задавати початковий стан без конструктора.
Публічне поле класу — це властивість, яку можна оголосити безпосередньо в тілі класу:
class User {
name = "Невідомий";
age = 0;
}Після створення об’єкта ці поля доступні через крапку:
const user = new User();
console.log(user.name); // Невідомий
console.log(user.age); // 0Публічні поля належать кожному окремому екземпляру класу. У наведеному прикладі кожен об’єкт User матиме власні name та age.
До появи публічних полів початковий стан об’єкта зазвичай задавали в конструкторі:
class Counter {
constructor() {
this.value = 0;
this.step = 1;
}
}Те саме можна записати коротше за допомогою публічних полів:
class Counter {
value = 0;
step = 1;
}Цей підхід зручний, коли властивості мають прості початкові значення і не потребують параметрів.
Поле оголошується всередині класу:
class Product {
title = "Без назви";
price = 0;
inStock = true;
}Значення поля може бути:
рядком;
числом;
логічним значенням;
масивом;
об’єктом;
результатом виконання виразу або виклику функції.
class ShoppingCart {
items = [];
total = 0;
createdAt = new Date();
}Поля можна змінювати після створення об’єкта:
const cart = new ShoppingCart();
cart.items.push("Book");
cart.total = 25;
console.log(cart.items); // [ 'Book' ]
console.log(cart.total); // 25Публічні поля не замінюють конструктор у всіх випадках. Конструктор потрібен, коли початкові значення залежать від аргументів.
class User {
name = "Невідомий";
age = 0;
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new User("Олена", 25);
console.log(user.name); // Олена
console.log(user.age); // 25У цьому прикладі name та age спочатку отримують значення з оголошення полів, а потім конструктор замінює їх значеннями з аргументів.
Якщо властивість завжди має однакове початкове значення, її можна залишити тільки як поле:
class User {
role = "user";
constructor(name) {
this.name = name;
}
}Методи класу можуть звертатися до публічних полів через this:
class Counter {
value = 0;
step = 1;
increase() {
this.value += this.step;
}
decrease() {
this.value -= this.step;
}
}
const counter = new Counter();
counter.increase();
counter.increase();
counter.decrease();
console.log(counter.value); // 1this.value і this.step належать конкретному об’єкту counter.
Кожен виклик new створює новий об’єкт із власними полями:
class User {
name = "";
roles = [];
}
const firstUser = new User();
const secondUser = new User();
firstUser.name = "Андрій";
firstUser.roles.push("admin");
console.log(firstUser.name); // Андрій
console.log(secondUser.name); // ""
console.log(firstUser.roles); // [ 'admin' ]
console.log(secondUser.roles); // []Масив roles створюється окремо для кожного екземпляра. Зміна firstUser.roles не змінює secondUser.roles.
Ініціалізатор поля може використовувати поле, оголошене вище:
class Rectangle {
width = 10;
height = 5;
area = this.width * this.height;
}
const rectangle = new Rectangle();
console.log(rectangle.area); // 50Порядок оголошення важливий:
class Example {
first = 10;
second = this.first * 2;
}У цьому випадку second отримує значення 20.
Краще не використовувати в полі інше поле, оголошене нижче, якщо від цього залежить результат:
class Example {
second = this.first * 2;
first = 10;
}
const example = new Example();
console.log(example.second); // NaNНа момент обчислення second поле first ще не має значення 10.
class Task {
title = "Нове завдання";
completed = false;
tags = [];
constructor(title) {
if (title) {
this.title = title;
}
}
complete() {
this.completed = true;
}
addTag(tag) {
this.tags.push(tag);
}
getInfo() {
const status = this.completed ? "виконано" : "у роботі";
return `${this.title}: ${status}`;
}
}
const task = new Task("Вивчити публічні поля");
task.addTag("JavaScript");
task.addTag("класи");
console.log(task.getInfo());
// Вивчити публічні поля: у роботі
task.complete();
console.log(task.getInfo());
// Вивчити публічні поля: виконано
console.log(task.tags);
// [ 'JavaScript', 'класи' ]У класі Task:
title, completed і tags — публічні поля;
title має значення за замовчуванням;
completed початково дорівнює false;
tags є окремим масивом для кожного завдання;
конструктор дає змогу передати власну назву;
методи змінюють значення публічних полів.
Публічне поле доступне ззовні об’єкта:
class Account {
balance = 0;
}
const account = new Account();
account.balance = 100;
console.log(account.balance); // 100У JavaScript також існують приватні поля. Їхні назви починаються із символу #:
class Account {
balance = 0;
#pin = "1234";
checkPin(pin) {
return this.#pin === pin;
}
}
const account = new Account();
console.log(account.balance); // 0
console.log(account.checkPin("1234")); // trueДо приватного поля не можна звернутися безпосередньо за межами класу:
// account.#pin; // ПомилкаПублічні поля використовують для стану, який може бути доступний коду за межами класу. Приватні поля — для внутрішніх даних, які клас має приховати.
Публічні поля добре підходять, коли:
потрібно оголосити початковий стан об’єкта;
значення за замовчуванням прості;
поле використовується методами класу;
властивість має бути доступною зовні;
не потрібно виконувати складну логіку під час створення об’єкта.
Якщо початкове значення залежить від аргументів, використовуйте конструктор:
class Rectangle {
width = 1;
height = 1;
constructor(width, height) {
this.width = width;
this.height = height;
}
}Публічні поля потрібно оголошувати всередині тіла класу:
class User {
name = "Олена";
}Такий запис не є оголошенням поля класу:
class User {}
User.name = "Олена";У другому прикладі створюється властивість самого конструктора User, а не поле кожного об’єкта:
const user = new User();
console.log(user.name); // undefined
console.log(User.name); // ОленаthisУ методах для доступу до полів потрібно використовувати this:
class Counter {
value = 0;
increase() {
this.value += 1;
}
}Запис value += 1 без this не звертається до поля об’єкта.
Не створюйте спільний масив як властивість конструктора, якщо він має бути окремим для кожного екземпляра:
class User {
static roles = [];
}static означає, що поле належить самому класу, а не його екземплярам. Для окремого масиву кожного користувача використовуйте звичайне поле:
class User {
roles = [];
}Поля ініціалізуються зверху вниз. Якщо одне поле залежить від іншого, спочатку оголошуйте потрібне поле:
class Score {
points = 10;
doublePoints = this.points * 2;
}Публічні поля оголошують безпосередньо всередині класу.
Вони задають початковий стан кожного екземпляра.
Для доступу до полів у методах використовуйте this.
Кожен екземпляр має власні значення полів.
Масиви й об’єкти, оголошені як поля, створюються окремо для кожного екземпляра.
Конструктор потрібен, коли початкові значення залежать від аргументів.
Публічні поля доступні ззовні, а приватні поля з префіксом # — лише всередині класу.
Порядок оголошення полів важливий, якщо вони залежать одне від одного.