JavaScript & TypeScriptМодуль 6: ООП и паттерны
Классы
Синтаксис классов в JavaScript
Цель урока
В этом уроке ты научишься:
- Создавать классы
- Использовать конструктор и методы
- Работать со статическими членами
Базовый синтаксис
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Привет, я ${this.name}`);
}
}
let user = new User("Иван", 25);
user.greet(); // "Привет, я Иван"Конструктор
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
this.createdAt = new Date();
}
}
let product = new Product("Телефон", 50000);
console.log(product.name); // "Телефон"
console.log(product.createdAt); // текущая датаМетоды
class Calculator {
constructor(value = 0) {
this.value = value;
}
add(n) {
this.value += n;
return this;
}
subtract(n) {
this.value -= n;
return this;
}
multiply(n) {
this.value *= n;
return this;
}
getResult() {
return this.value;
}
}
let calc = new Calculator(10);
let result = calc.add(5).multiply(2).subtract(10).getResult();
console.log(result); // 20Геттеры и сеттеры
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
set fullName(value) {
[this.firstName, this.lastName] = value.split(" ");
}
}
let user = new User("Иван", "Петров");
console.log(user.fullName); // "Иван Петров"
user.fullName = "Пётр Сидоров";
console.log(user.firstName); // "Пётр"Статические члены
class MathUtils {
static PI = 3.14159;
static square(n) {
return n * n;
}
static cube(n) {
return n * n * n;
}
}
console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.square(5)); // 25
console.log(MathUtils.cube(3)); // 27
// Не работает на экземплярах
// let m = new MathUtils();
// m.square(5); // Ошибка!Приватные поля
class BankAccount {
#balance = 0;
constructor(initialBalance) {
this.#balance = initialBalance;
}
deposit(amount) {
if (amount > 0) {
this.#balance += amount;
}
}
withdraw(amount) {
if (amount > 0 && amount <= this.#balance) {
this.#balance -= amount;
return amount;
}
return 0;
}
getBalance() {
return this.#balance;
}
}
let account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Ошибка!Практика
Задание 1: Создание класса
Задача: Создай класс Rectangle с методами.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
20 18
Задание 2: Геттер
Задача: Добавь геттер для вычисляемого свойства.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
78.53981633974483
Задание 3: Статический метод
Задача: Создай класс со статическим методом.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Hello
Проверь себя
- Что делает конструктор?
- Чем статические методы отличаются от обычных?
- Как создать приватное поле?