39. Публичные и приватные поля (#)

JavaScript: Мозги. Урок “Публичные и приватные поля (#)”

Иллюстрация к уроку Добро пожаловать на урок, посвященный приватным полям в JavaScript. Мы разберем, как защитить данные внутри ваших классов, сделав их недоступными извне.

Что такое публичные и приватные поля?

В JavaScript, как и в других объектно-ориентированных языках, мы можем создавать классы, которые содержат данные (свойства) и методы. По умолчанию, все свойства класса являются публичными, то есть к ним можно получить доступ и изменить их из любой точки программы.

class User {
  constructor(name) {
    this.name = name; // Публичное поле
  }

  greet() {
    console.log(`Привет, я ${this.name}!`);
  }
}

const user = new User("Алиса");
console.log(user.name); // Алиса
user.name = "Боб"; // Изменяем публичное поле
user.greet(); // Привет, я Боб!

Однако, иногда необходимо скрыть некоторые данные, чтобы предотвратить случайное изменение или обеспечить корректную работу класса. Для этого существуют приватные поля. В JavaScript приватные поля обозначаются префиксом #.

class BankAccount {
  #balance = 0; // Приватное поле

  constructor(initialBalance) {
    if (initialBalance > 0) {
      this.#balance = initialBalance;
    }
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  withdraw(amount) {
    if (amount > 0 && amount <= this.#balance) {
      this.#balance -= amount;
    }
  }

  getBalance() {
    return this.#balance; // Доступ к приватному полю внутри класса
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150
// console.log(account.#balance); // Ошибка! Нельзя получить доступ извне

В примере выше, #balance является приватным полем. Мы не можем получить к нему доступ напрямую извне класса BankAccount. Мы можем только работать с ним через публичные методы deposit, withdraw и getBalance.

Практический пример

Предположим, у нас есть класс Counter, который должен отслеживать количество кликов. Мы хотим, чтобы значение счетчика можно было только увеличивать внутри класса, а не менять его напрямую извне.

class Counter {
  #count = 0;

  increment() {
    this.#count++;
    this.displayCount();
  }

  displayCount() {
    document.getElementById("counter").innerText = this.#count;
  }
}

const counter = new Counter();

document.getElementById("incrementButton").addEventListener("click", () => {
  counter.increment();
});

<!DOCTYPE html>
<html>
<head>
  <title>Counter Example</title>
</head>
<body>
  <button id="incrementButton">Increment</button>
  <p>Count: <span id="counter">0</span></p>
  <script src="script.js"></script>
</body>
</html>

В этом примере, #count является приватным полем. Мы можем увеличивать его только через метод increment. Попытка напрямую изменить counter.#count приведет к ошибке.

Жизненный пример

Приватные поля активно используются в современных JavaScript фреймворках, таких как React, Angular и Vue. Они позволяют разработчикам создавать компоненты с инкапсулированной логикой и предотвращают случайное изменение внутреннего состояния компонента извне. Например, в React, приватные поля могут использоваться для хранения внутреннего состояния компонента, которое не должно быть доступно для изменения из родительских компонентов. Также их можно встретить в библиотеках для работы с DOM, где важно обеспечить консистентность состояния элементов интерфейса.

Ключевые моменты

Приватные поля обозначаются префиксом #.
Приватные поля доступны только внутри класса, где они были объявлены.
Попытка доступа к приватному полю извне класса приведет к ошибке.
Приватные поля помогают защитить внутреннее состояние объекта и предотвратить случайное изменение данных.
Они важны для создания надежного и поддерживаемого кода.