JavaScript · Синтаксис · Начальный уровень

Основы ООП

11 задач

Практические задания по основам ООП в JavaScript: создание классов и объектов, свойства, методы, constructor, изменение состояния объекта и простое моделирование сущностей.

Краткое введение в тему и пояснения перед упражнениями (упражнения ниже):

Классы и объекты — идея

#
Класс — это шаблон. Объект — это то, что вы строите по этому шаблону. Один и тот же класс может породить много объектов, каждый со своими независимыми данными. ```javascript class BankAccount { constructor(balance) { this.balance = balance; } } const acc1 = new BankAccount(100); const acc2 = new BankAccount(500); console.log(acc1.balance); // 100 console.log(acc2.balance); // 500 ``` acc1 и acc2 — независимые объекты. Изменение acc1.balance не влияет на acc2. Классы объединяют две вещи: данные (свойства) и поведение (методы). Метод — это функция, определённая внутри класса. Именно такое объединение и является главной идеей объектно-ориентированного программирования. Если вы уже знакомы с Python: то, что Python называет self, JavaScript называет this. То, что Python называет __init__, JavaScript называет constructor. Концепция идентична — только синтаксис отличается.

constructor и this

#
constructor — это метод, который JavaScript вызывает автоматически при создании нового объекта через new. Он настраивает начальное состояние экземпляра. ```javascript class Rectangle { constructor(width, height) { this.width = width; this.height = height; } } const r = new Rectangle(3, 4); console.log(r.width, r.height); // 3 4 ``` this — это ссылка на создаваемый объект. Когда вы пишете this.width = width, вы сохраняете значение на самом объекте. Каждое свойство, которое должен помнить объект, должно быть присвоено через this. В отличие от Python's self, this не объявляется как параметр — JavaScript предоставляет его автоматически внутри любого метода. ```javascript class Rectangle { constructor(width, height) { this.width = width; this.height = height; } area() { return this.width * this.height; } } const r = new Rectangle(3, 4); console.log(r.area()); // 12 ``` Методы в классе JavaScript определяются без ключевого слова function — только имя и скобки. Внутри метода this даёт доступ к собственным свойствам объекта.

Распространённые паттерны классов

#
Метод, изменяющий состояние объекта — ничего не возвращает, только изменяет свойство: ```javascript class Counter { constructor(value) { this.value = value; } increment() { this.value++; } } const c = new Counter(0); c.increment(); c.increment(); console.log(c.value); // 2 ``` Метод, проверяющий условие и возвращающий булево значение: ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } isAdult() { return this.age >= 18; } } ``` Метод, вычисляющий что-то на основе свойств и возвращающий значение: ```javascript class Temperature { constructor(celsius) { this.celsius = celsius; } toFahrenheit() { return this.celsius * 9 / 5 + 32; } } ``` Метод, изменяющий состояние с параметром: ```javascript class BankAccount { constructor(balance) { this.balance = balance; } deposit(amount) { this.balance += amount; } } ``` Паттерн всегда одинаков: обращаемся к нужному через this, вычисляем или изменяем, возвращаем только тогда, когда есть значимое значение.

Упражнения:

01

Класс User с именем.

#

Создайте класс User со свойством name . Создайте объект этого класса и выведите его имя.

class User {
    // ваш код здесь
}
let user = new User("Alex");
console.log(user.name);
Решение 
class User {
    constructor(name) {
        this.name = name;
    }
}
let user = new User("Alex");
console.log(user.name);

// или можно создать метод, который возвращает имя
class User {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}
02

Класс Car: бренд и год.

#

Создайте класс Car с свойствами brand и year . Создайте объект и выведите строку: "Car: Toyota, 2020"

class Car {
    // ваш код здесь
}
Решение 
class Car {
    constructor(brand, year) {
        this.brand = brand;
        this.year = year;
    }
}
let car = new Car("Toyota", 2020);
console.log(`Car: ${car.brand}, ${car.year}`);
03

Счётчик с increment.

#

Создайте класс Counter со свойством value . Добавьте метод increment , который увеличивает значение на 1.

class Counter {
    // ваш код здесь
}
let c = new Counter(0);
c.increment();
console.log(c.value);
Решение 
class Counter {
    constructor(value) {
        this.value = value;
    }
    increment() {
        this.value += 1;
    }
}
let c = new Counter(0);
c.increment();
console.log(c.value);

// или так можно: increment может возвращать новое значение
class Counter {
    constructor() {
        this.value = 0;
    }

    increment() {
        this.value += 1;
        return this.value;
    }
}
04

Площадь прямоугольника.

#

Создайте класс Rectangle с свойствами width и height . Добавьте метод area , который возвращает площадь.

class Rectangle {
    // ваш код здесь
}
let rectangle = new Rectangle(3, 4);
console.log(rectangle.area());
Решение 
class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    area() {
        return this.width * this.height;
    }
}
let rectangle = new Rectangle(3, 4);
console.log(rectangle.area());
05

Приветствие методом класса.

#

Создайте класс Greeting с методом sayHello, который возвращает строку "Hello!".

class Greeting {
    // ваш код здесь
}
let greeting = new Greeting();
console.log(greeting.sayHello());
Решение 
class Greeting {
    sayHello() {
        return "Hello!";
    }
}
let greeting = new Greeting();
console.log(greeting.sayHello());
06

Проверка совершеннолетия.

#

Создайте класс Person с свойствами name и age . Добавьте метод isAdult , который возвращает true , если возраст 18 и больше.

class Person {
    // ваш код здесь
}
let person = new Person("John", 20);
console.log(person.isAdult());
Решение 
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    isAdult() {
        return this.age >= 18;
    }
}
let person = new Person("John", 20);
console.log(person.isAdult());
07

Пополнение банковского счёта.

#

Создайте класс BankAccount со свойством balance . Добавьте метод deposit , который увеличивает баланс.

class BankAccount {
    // ваш код здесь
}
let account = new BankAccount(100);
account.deposit(50);
console.log(account.balance);
Решение 
class BankAccount {
    constructor(balance) {
        this.balance = balance;
    }
    deposit(amount) {
        this.balance += amount;
    }
}
let account = new BankAccount(100);
account.deposit(50);
console.log(account.balance);

// или так можно: явно не позволять пополнять счёт отрицательной суммой
class BankAccount {
    constructor(balance) {
        this.balance = balance;
    }

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

Конвертация Celsius в Fahrenheit.

#

Создайте класс Temperature со свойством celsius . Добавьте метод toFahrenheit , который возвращает температуру в градусах Фаренгейта. Формула celsius * 9 / 5 + 32.

class Temperature {
    // ваш код здесь
}
let temperature = new Temperature(0);
console.log(temperature.toFahrenheit());
Решение 
class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }
    toFahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }
}
let temperature = new Temperature(0);
console.log(temperature.toFahrenheit());
09

Длина сообщения методом.

#

Создайте класс Message со свойством text . Добавьте метод getLength, который возвращает длину сообщения.

class Message {
    // ваш код здесь
}
let message = new Message("Hello world");
console.log(message.getLength());
Решение 
class Message {
    constructor(text) {
        this.text = text;
    }
    getLength() {
        return this.text.length;
    }
}
let message = new Message("Hello world");
console.log(message.getLength());
10

Таймер с добавлением секунд.

#

Создайте класс Timer со свойством seconds . Добавьте метод addTime, который увеличивает время на указанное количество секунд.

class Timer {
    // ваш код здесь
}
let timer = new Timer(10);
timer.addTime(5);
console.log(timer.seconds);
Решение 
class Timer {
    constructor(seconds) {
        this.seconds = seconds;
    }
    addTime(extra) {
        this.seconds += extra;
    }
}
let timer = new Timer(10);
timer.addTime(5);
console.log(timer.seconds);
11

Класс Formatter для строк.

#

Напишите класс Formatter со свойством string у объекта. При создании экземпляра класса строка передаётся в constructor и сохраняется в this.string. У класса должно быть несколько методов, которые возвращают изменённый вариант этой строки: - метод trim(length) возвращает строку, обрезанную до указанной длины, и добавляет в конец "[...]". Длину этих добавленных символов нужно учитывать. - метод truncate(length) возвращает строку, обрезанную до указанной длины, но не разрывает слова, а обрезает по последнему пробелу в пределах указанной длины. ВНИМАНИЕ: - исходная строка в this.string должна оставаться неизменной; - не создавайте отдельные свойства для результатов, возвращайте новые значения из методов; - можно создавать служебные свойства, например для строки "[...]"; - внутри методов можно использовать обычные локальные переменные, не всё нужно сохранять в this.

class Formatter {
    constructor(string) {
        // ваш код здесь
    }
    trim(length) {
        // ваш код здесь
    }
    truncate(length) {
        // ваш код здесь
    }
}
let x = new Formatter("Эта строка для примера просто используется тут и не имеет другого смысла.");
console.log(x.trim(15));
console.log(x.truncate(15));
console.log(x.string);
let y = new Formatter("Ура у меня получилось!.");
console.log(y.trim(8));
console.log(y.truncate(3));
console.log(y.string);
Решение 
class Formatter {
    constructor(string) {
        this.string = string;
        this.end = "[...]";
    }

    trim(length) {
        if (length <= this.end.length) {
            return this.end.slice(0, length);
        }

        return this.string.slice(0, length - this.end.length) + this.end;
    }

    truncate(length) {
        const part = this.string.slice(0, length);
        const lastSpace = part.lastIndexOf(" ");
        return lastSpace === -1 ? part : part.slice(0, lastSpace);
    }
}

let x = new Formatter("Эта строка для примера просто используется тут и не имеет другого смысла.");
console.log(x.trim(15));
console.log(x.truncate(15));
console.log(x.string);

let y = new Formatter("Ура у меня получилось!.");
console.log(y.trim(8));
console.log(y.truncate(3));
console.log(y.string);