Классы: Объявление. Внутренние функции. Вызов. Наследование

1. Классы

Проектирование и разработка веб-приложений. Лекция 5.
Классы
Объявление. Внутренние функции. Вызов. Наследование
Москва, 2025

2. Повестка дня

Объявление………………….3
Обозначение………………...4
Внутренние функции……….5
Наследование……………….6
Переопределение…………..7
Статические свойства и
методы………………………..8
Приватность и
защищённость……………….9

3. Объявление

class Pokemon {
name = "Аноним";
constructor(name, type, owner,
evolution) {
this.name = name;
this.type = type;
this.owner = owner;
this.evolution = evolution;
}
alert(typeof Pokemon); // function
Конструктор
call() {
alert(this.owner, " вызывает ",
this.name);
}
}
Объявление класса
Метод класса
Свойства (поля) класса
const Person = class{}
let myClass = class MyClass{field}
3
function makeClass(phrase) {
return class {
name;
class User {
sayHi() {
['say' + 'Hi']() {
alert(phrase);
alert("Привет");
};
}
};
}
}
new User().sayHi();

4. Вызов

let pokemon = new Pokemon("Marsik",
"Raichu", "James", 2 );
pokemon.call();
Вызов метода объекта
Изменение значения поля
pokemon.name = "Tom";
Определение объекта
const user = new Person();
new myClass().field; //Unknown если там ничего не лежит
new MyClass().field; // ошибка
Вызов поля объекта
4

5. Внутренние функции

console.log(tom.constructor);
class User {
constructor(name) {
// вызывает сеттер
this.name = name;
}
get name() {
return this._name;
}
Getter для возвращения значения
set name(value) {
if (value.length < 4) {
alert("Имя слишком короткое.");
return;
}
this._name = value;
}
Setter для изменения значения
Валидация значения
}
let user = new User("Ронни");
alert(user.name); // Ронни
Применение
this - ключевое слово для вывода
элемента текущего объекта
класса
user = new User(""); // Имя слишком
короткое.
5

6. Наследование

class Pikachu extends Pokemon {
attack() {
alert(`${this.name} швыряет молнию!`);
}
}
let pikachu = new Pikachu("Марсик",
"Райчу", "Джеймс", 2);
pikachu.call(); // Джеймс вызывает Марсик
pikachu.attack(); // Марсик швыряет
молнию!
6
Наследование классов –
это способ расширения
одного класса другим
классом.
Синтаксис наследования:
class Child extends Parent.
Синтаксис создания
класса допускает
указывать после extends
не только класс, но и
любое выражение.

7. Переопределение

class myPikachu extends Pikachu {
name = ‘Pikachu';
constructor(name, type, owner,
age) {
super(name);
super(type);
super(owner);
this.age = age;
}
attack() {
alert(`${super.name} швыряет
${this.age}-вольтную молнию!`);
}
}
7
Конструкторы в наследуемых
классах должны обязательно
вызывать super(...), и (!) делать
это перед использованием this
У стрелочных функций нет super
Родительский конструктор
всегда использует своё
собственное значение поля, а
не переопределённое.
Если конструктора нет, он
создаётся автоматически

8. Статические свойства и методы

class Pokemon {
static maxEvolution = 3;
constructor(name, evolution);
}
Pokemon.staticMethod = function()
{
alert("Покемон эволюционирует");
};
let pokemons = [
new Pokemon("HTML", 1),
new Pokemon("CSS", 1),
new Pokemon("JavaScript", 2)
];
8
Статические методы
используются для
функциональности, принадлежат
классу «в целом», а не относятся
к конкретному объекту класса.
Статические свойства и методы
также наследуются.

9. Приватность и защищённость

Объявление
class Pokemon {
#name;
readonly #owner;
protected _evolution;
type;
constructor(name = "Аноним", type, owner, evolution) {
this.#name = name;
this.type = type;
this.#owner = owner;
this._evolution = evolution;
}
getName() {
return this.#name;
}
getOwner() {
return this.#owner;
}
getEvolution() {
return this._evolution;
}
call() {
alert(`${this.#owner} вызывает ${this.#name}`);
}
}
9
class Pikachu extends Pokemon
{
attack() {
alert(`${this.getName()}
швыряет молнию!`);
}
evolve(newEvolution) {
this._evolution =
newEvolution;
alert(`${this.getName()}
эволюционировал в
${this._evolution}!`);
}
tryAccessProtectedField() {
alert(`Эволюция:
${this._evolution}`);
}
}

10. Приватность и защищённость

Проверка
Приватность и защищённость
const pika = new Pikachu("Пикачу",
"Электрический", "Эш", "Райчу");
pika.attack(); // Атака
pika.evolve("Супер Райчу"); //
Изменение защищённого поля
pika.tryAccessProtectedField(); //
Эволюция
// Попытка изменить owner
// pika.#owner = "Другой тренер";
// Ошибка: приватное поле
// console.log(pika.#name); //
Ошибка: приватное поле
10
Защищённые свойства обычно
начинаются с префикса _.
По умолчанию все свойства
публичные.
Для создания свойства readonly
(только для чтения) достаточно не
прописывать его setter и создавать
его с помощью конструктора.
Приватные свойства и методы
должны начинаться с #. Они
доступны только внутри класса. С
приватными свойствами такое
невозможно: this['#name'] не
работает.

11. Задание

Переписать массивы данных в практическом задании 6 (презентация Sфункции — задание 1) с помощью классов:
1 вариант:
Переписать функцию регистрации с применением конструктора.
Внесите функцию отмены брони как метод соответствующего класса.
2 вариант:
Переписать функцию выдачи абонемента с применением конструктора.
Оформить функцию просмотра свободных дней тренера в виде метода
соответствующего класса.
11

12. На этом всё…