Создание закрытых полей в JavaScript

До недавнего времени JavaScript не предоставлял программистам возможности определять частные поля.

Частное поле — это свойство класса, доступ к которому ограничен пределами класса. Эти свойства даже не могут быть унаследованы подклассами.

Чтобы обозначить приватные поля, нужно было написать что-то похожее на следующее:

class Employee {
  constructor(salary, age) {
    this._salary = salary;
    this._age = age;
  }
}

В приведенном выше фрагменте кода '_' перед salary и age были использованы для того, чтобы сообщить другим программистам, что эти поля являются приватными и не предназначены для доступа извне.

Подождите! Мы все еще можем получить доступ к этим полям извне

const employee = new Employee(20000, 35);
employee._salary;
// => 20000

employee._age;
// => 35

Как мы видим, это обходное решение не меняет поведение полей _salary и _age, поскольку они все еще могут быть доступны и изменены извне.

Проще говоря, _salary и _age по-прежнему общедоступны.😒

Частные поля

Недавно в JavaScript появились приватные поля. Теперь мы можем лаконично определить приватные поля и спать спокойно, будучи уверенными, что кто-то случайно не получит к ним доступ и не изменит их извне.

Как это выглядит?

Чтобы определить частные поля, вот что вам нужно сделать:

class Employee {
  // We must declare private fields before accessing them
  #salary;
  #age;

  constructor(salary, age) {
    this.#salary = salary;
    this.#age = age;
  }
}

Да! Это так просто! # указывает на то, что это частное свойство. В отличие от _, # ограничивает любой внешний доступ к свойствам salary и age.

Попытка получить доступ к этим свойствам извне вернет undefined.

const employee = new Employee(20000, 35);
employee.#salary;
// => undefined

employee.#age;
// => undefined

Отлично! Теперь мы добились желаемого поведения.

О чем еще я должен знать?

Есть несколько моментов, на которые следует обратить внимание при объявлении частных свойств с помощью оператора #.

Хотя приведенный ниже код будет работать просто отлично:

class Employee {
  constructor(salary, age) {
    this._salary = salary;
    this._age = age;
  }
}

Этот 👇 не будет работать:

class Employee {
  constructor(salary, age) {
    this.#salary = salary;
    this.#age = age;
  }
}

JavaScript выдаст синтаксическую ошибку 👇👇👇

Почему?

При использовании # для определения свойства, это свойство должно быть объявлено до обращения к нему.

Другими словами, не обязательно объявлять публичные поля перед обращением к ним, но вы ДОЛЖНЫ объявить приватные поля перед обращением к ним.

Основные выводы

• Частные поля — это свойства, недоступные извне.
• В JavaScript приватные поля объявляются путем добавления # непосредственно перед именем свойства, например, #privatePropertyName.
• Внешний доступ к частным полям вернет undefined.
• Частные поля должны быть объявлены до того, как к ним будет получен доступ.