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

Часть раздела Объектно-ориентированное программирование путешествия по JavaScript на Coddy — урок 18 из 56.

В классах JavaScript мы можем определять два типа полей класса: публичные (public) и приватные (private).

Публичные поля доступны извне класса и могут быть использованы кем угодно.

Создайте класс с публичными полями:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

Создайте экземпляр student:

const student = new Student('Alice', 95);

Доступ к публичным полям извне класса:

console.log(student.name); // Вывод: "Alice"
student.grade = 98;
console.log(student.grade); // Вывод: 98

Приватные поля обозначаются символом # и к ним можно получить доступ только внутри класса:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

Использование приватных полей:

const student = new Student('Bob', 87);
console.log(student.name); // Вывод: "Bob"

// Доступ к приватному полю с помощью метода
console.log(student.getGrade()); // Вывод: 87

// Обновление приватного поля с помощью метода
student.updateGrade(92);
console.log(student.getGrade()); // Вывод: 92

// Это вызовет ошибку:
// console.log(student.#grade); // SyntaxError

Задание

Добавьте два поля в класс с именем UserAccount:
1. Публичное поле username
2. Приватное поле #password
Добавьте конструктор, который принимает параметры username и password

Шпаргалка

Классы JavaScript поддерживают публичные и приватные поля.

Публичные поля доступны извне класса:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

const student = new Student('Alice', 95);
console.log(student.name); // Output: "Alice"
student.grade = 98;

Приватные поля используют символ # и могут быть доступны только внутри класса:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

const student = new Student('Bob', 87);
console.log(student.getGrade()); // Output: 87
student.updateGrade(92);
// student.#grade would cause a SyntaxError

Попробуйте сами

import { UserAccount } from './userAccount.js';

// Тестовый код - не изменять
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // Должно вывести "alice"