Уроки JavaScript – ознайомлення з класами (частина 2)

Класи в JavaScript дозволяють писати більш чистий і читабельний код. Сьогоднішня стаття продовжує тему класів в JavaScript, і в ній мова піде про такі поняття, як поля класів, методи доступу гетери і сетери. Це дозволить вам поліпшити свої навички програмування і стати більш просунутим JavaScript розробником.

Попередня стаття циклу: Ознайомлення з класами в JavaScript (частина 1)

 

 

JavaScript класи і поля класів

Ви пам’ятаєте конструктор класу з попереднього уроку? Доброю новиною є те, що він більше не буде потрібен. Замість цього ми будемо використовувати поля класу.

Метою полів класів, які також називаються властивостями класів, є забезпечення того, щоб JavaScript розробники могли створювати більш прості конструктори в класах JavaScript. Простіше кажучи, вам більше не доведеться оголошувати властивості класу всередині конструктора. Замість цього ви можете оголосити їх безпосередньо, поза конструктора і навіть опустити сам конструктор.

 

 

Відкриті поля і методи

Одна річ, яку ви повинні знати і пам’ятати на майбутнє, — це те, що коли ви створюєте ці поля, всі вони стають «загальнодоступними» за замовчуванням. Це означає, що всі ці поля будуть доступні як зсередини, так і зовні класу. Ви зможете отримати до них доступ і змінити їх, при бажанні. Те ж саме відноситься і до методів.

<script>
 class Vehicle {
  // Оголошуємо всі властивості безпосередньо, як відкриті за замовчуванням
  name = 'Автомобіль';
  condition = 'Б/в';
  speed = 220;
  // Всі методи нижче створені як публічні за замовчуванням
  vehicleName(name) {
   this.name = name;
  }
  vehicleCondition(condition) {
   this.condition = condition;
  }
  vehicleSpeed(speed) {
   this.speed = speed;
  }
 }
</script>

 

 

Закриті поля і методи

Всі властивості класу (або поля) за замовчуванням є відкритими. Таким чином, будь-хто може отримати до них доступ і змінити їх. Це може бути не бажано у всіх ситуаціях. Іноді ви можете захотіти зберегти деякі властивості закритими або недоступними поза класом. Це саме те, що можуть робити закриті поля.

Коли ви оголошуєте якусь властивість класу як закриту, ви можете отримати до неї доступ тільки всередині цього класу. Отже, якщо ви хочете отримати доступ до цієї властивості і змінити її, ви можете створити методи всередині цього класу і використовувати їх для зміни цих властивостей. Синтаксис для створення закритих полів простий, досить вказати перед ім’ям властивості #. Потім не забудьте використовувати #, коли вам потрібно буде отримати доступ до такої властивості.

 

Клас з відкритими і закритими властивостями

<script>
 class MyClass {
  // створюємо відкриту властивість
  foo = 'Це відкрита властивість';
  // Створюємо закриту властивість. Не забудьте почати з #
  #bar = 'Це закрита властивість';
  // Додаємо метод для доступу до публічної властивості foo
  getFoo() {
   return this.foo;
  }
  // Додаємо метод для доступу до закритої властивості bar
  getBar() {
   // Не забудьте використовувати повне ім'я властивості, включаючи #
   return this.#bar;
  }
  // Додаємо метод для зміни закритої властивості bar
  changeBar(text) {
   // Не забудьте використовувати повне ім'я властивості, включаючи #
   this.#bar = text;
  }
 }
 // Створюємо екземпляр класу MyClass
 const classInstanceOne = new MyClass();
 // Спробуємо побачити в лозі відкриту властивість foo за допомогою методу getFoo()
 console.log(classInstanceOne.getFoo()); // Вивід: Це відкрита властивість
 // Спробуємо побачити в лозі закриту властивість bar за допомогою методу getBar()
 console.log(classInstanceOne.getBar()); // Вивід: Це закрита властивість
 // Спробуємо побачити в лозі відкриту властивість foo безпосередньо
 console.log(classInstanceOne.foo); // Вивід: Це відкрита властивість
 // Спробуємо побачити в лозі закриту властивість bar безпосередньо
 console.log(classInstanceOne.#bar); // Вивід: SyntaxError: Undefined private field undefined: must be declared in an enclosing class
 // Використовуємо метод changeBar, щоб змінити закриту властивість bar
 classInstanceOne.changeBar('Це новий текст');
 // Спробуємо знову побачити в лозі закриту властивість bar з методом getBar()
 console.log(classInstanceOne.getBar()); // Вивід: Це новий текст
</script>

 

 

Подібно до відкритих методів, ви також можете створювати свої власні закриті методи. Правила ті ж, що і для закритих властивостей (або полів). Ці методи видно тільки всередині класу. Ви не можете отримати доступ до них або використовувати їх ззовні. Тут синтаксис такий же. Потрібно вказувати назву методу починаючи з #.

 

 

Статичні властивості і методи

Відкриті і закриті властивості і методи – не єдине, що ви можете використовувати в своєму коді. Класи JavaScript також підтримують статичні властивості і методи. Одна з відмінностей між відкритими, закритими і статичними властивостями і методами полягає в тому, що статичні властивості і методи можна викликати для класу без створення нового екземпляра.

Ви можете викликати з класу статичні властивості і методи тільки один раз. Ви не можете викликати статичні властивості і методи з примірників класу. Синтаксис оголошення властивості або методу як статичного також простий. Все, що вам потрібно зробити, це використовувати ключове слово static перед ім’ям властивості або методу.

<script>
 // Клас зі статичними властивістю і методом
 class MyClass {
  // Оголошуємо статичну властивість
  static foo = 'Статична властивість';
  // Оголошуємо статичний метод
  static getFoo() {
   // Повертаємо значення статичної властивості foo
   return MyClass.foo;
  }
 }
 // Спробуємо отримати доступ до статичної властивості foo безпосередньо в MyClass
 console.log(MyClass.foo); // Вивід: Статична властивість
 // Спробуємо отримати доступ до статичної властивості foo, використовуючи статичний метод getFoo() в MyClass
 console.log(MyClass.getFoo()); // Вивід: Статична властивість
 // Створимо екземпляр класу MyClass
 const myClassInstance = new MyClass();
 // Спробуємо отримати доступ до статичної властивості foo в myClassInstance
 console.log(myClassInstance.getFoo()); // Вивід: TypeError: myClassInstance.getFoo is not a function
 console.log(myClassInstance.foo); // Вивід: undefined
</script>

 

 

Оскільки статичні методи можна викликати тільки в класах, розробники часто використовують їх для своїх додатків. Наприклад, ви можете використовувати їх для деякого очищення або оновлення при створенні нових екземплярів класу або знищенні існуючих. Те ж саме відноситься і до статичних властивостей. Наприклад, ви можете використовувати їх для підрахунку створених вами примірників класів.

 

 

 

Гетер і сетер методи доступу

Іншим відносно новим доповненням до класів JavaScript є методи доступу getter (гетер) і setter (сетер). Вони були введені в ECMAScript 5 і вони, насправді, дуже прості для розуміння і використання.

Простіше кажучи, гетери і сетери – це методи, які дозволяють вам обробляти дані перед отриманням або встановленням значень властивостей. Ви використовуєте сетер методи, коли хочете встановити або визначити значення властивостей. Наприклад, ви можете використовувати сетер метод для перевірки деякого значення, перш ніж ваш код дозволить використовувати його в якості значення властивості.

Гетер методи – це методи, які ви використовуєте, коли хочете отримати доступ і/або повернути значення властивості. Наприклад, якщо ви хочете отримати доступ до деякого значення властивості, вам не потрібно просто повертати (return) це значення. Замість цього ви можете використовувати метод гетера, щоб визначити «користувацький» вивід, такий як коротке повідомлення, яке містить значення цієї властивості.

Коли ви хочете створити метод доступу до сетера, перед ім’ям методу ставиться префікс set. Коли ви хочете створити метод доступу до гетера, ви використовуєте префікс get.

<script>
 class User {
  constructor(username) {
   // Це викличе сетер
   this.username = username;
  }
  // Створюємо гетер для властивості username
  get username() {
   console.log(`Ваш юзернейм ${this._username}.`);
  }
  // Створюємо сетер для властивості username
  set username(newUsername) {
   // перевіряємо довжину newUsername
   if (newUsername.length === 0) {
    // Показати повідомлення, якщо ім'я користувача занадто коротке
    console.log("Ім'я занадто коротке");
   }
   // В іншому випадку присвоюємо newUsername і використовуйте його в якості значення для юзернейм
   this._username = newUsername;
  }
 }
 // Створюємо екземпляр класу User
 const userOne = new User('Степан');
 // Отримуємо доступ до властивості username користувача userOne. Це автоматично викличе гетер метод для властивості username
 userOne.username; // Вивід: Ваш юзернейм Степан
 // Спробуємо створити екземпляр User без імені користувача. Це автоматично викличе сетер метод для властивості username
 const userTwo = new User(''); // Ім'я занадто коротке
</script>

 

 

У наведеному вище прикладі ми створили гетер і сетер методи для властивості username. Як бачите, ми додали перед властивістю username нижнє підкреслення (_). Без цього кожен раз, коли викликається метод get або set, це викликає переповнення стека. Це означає, що буде викликаний get, і він викличе гетер знову і знову. Це створить нескінченний цикл.

Дві речі про гетер і сетер функції, які ви повинні знати:

• По-перше, ви не викликаєте їх явно. Все, що вам потрібно зробити, це просто визначити їх. JavaScript зробить всю іншу роботу за вас.
• По-друге, setter і getter метод повинен мати те ж ім’я, що і властивість, яку ви хочете, щоб вони обробляли.

Ось чому в наведеному вище прикладі ми використовували username в якості імені для наших методів гетера і сетера. Це, поряд з ключовими словами get і set, повідомляє JavaScript, що потрібно робити, і з якою властивістю це робити. Тому переконайтеся, що імена методів setter і getter завжди збігаються з іменами властивостей.

 

 

 

От і все! На цьому тема класів в JavaScript оголошується закритою. Що далі? Рекомендуємо вам ще раз перечитати статті цього циклу, і спробувати на практиці розглянуті приклади коду, з використанням власних даних. Це допоможе вам краще засвоїти матеріал.

Дякуємо, що читаєте нас!