В этой статье мы рассмотрим, как использовать ООП в JavaScript для разработки приложения и представим пример такого приложения.

Основы ООП в JavaScript

Объектно-ориентированное программирование (ООП) – это метод написания программы, где каждый класс равен отдельному объекту, и они взаимодействуют друг с другом. Основные концепции ООП в JavaScript (и не только) включают в себя:

  1. Классы и объекты: классы – структуры, содержащие в себе свойства. А объекты – экземпляры классов.
  2. Свойства и методы: свойства – переменные внутри объекта, а методы – функции для манипуляций со свойствами.
  3. Наследование: метод создания иерархии, позволяющий одному классу перенимать свойства и методы другого.
  4. Инкапсуляция: метод повышения безопасности сокрытием данных объекта и отдающий лишь необходимый минимум.
  5. Полиморфизм: разным классам – разное действие на один триггер.
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Создание классов в JavaScript и ООП

Для создания классов в JavaScript используется ключевое слово `class`. Давайте рассмотрим пример создания класса `Person`, который будет представлять человека с именем и возрастом:

«`javascript

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

sayHello() {

console.log(`Привет, меня зовут ${this.name} и мне ${this.age} лет.`);

}

}

// Создание объекта Person

const person1 = new Person(«Иван», 30);

// Вызов метода sayHello

person1.sayHello(); // Вывод: «Привет, меня зовут Иван и мне 30 лет.»

«`

Наследование и полиморфизм

Давайте создадим класс `Student`, который будет наследоваться от класса `Person` и добавим новое свойство `school` и метод `study`, специфичный для студента:

«`javascript

class Student extends Person {

constructor(name, age, school) {

super(name, age); // Вызываем конструктор родительского класса

this.school = school;

}

study() {

console.log(`${this.name} учится в ${this.school}.`);

}

}

// Создание объекта Student

const student1 = new Student(«Анна», 20, «Университет»);

// Вызов методов sayHello и study

student1.sayHello(); // Вывод: «Привет, меня зовут Анна и мне 20 лет.»

student1.study(); // Вывод: «Анна учится в Университете.»

«`

Здесь мы используем ключевое слово `extends` для указания, что `Student` наследует от `Person`. Мы также используем метод `super()` для вызова конструктора родительского класса.

Инкапсуляция

Инкапсуляция позволяет скрыть детали реализации класса и предоставить только необходимый интерфейс. В JavaScript инкапсуляция может быть достигнута с помощью закрытых свойств и методов. Для этого используется префикс `_`:

«`javascript

class BankAccount {

constructor(accountNumber) {

this._accountNumber = accountNumber; // Закрытое свойство

this._balance = 0;

}

// Закрытый метод

_checkBalance() {

console.log(`Баланс на счете ${this._accountNumber}: ${this._balance}`);

}

deposit(amount) {

this._balance += amount;

this._checkBalance();

}

withdraw(amount) {

if (amount <= this._balance) {

this._balance -= amount;

this._checkBalance();

} else {

console.log(«Недостаточно средств на счете.»);

}

}

}

«`

В данном примере `_accountNumber` и `_balance` являются закрытыми свойствами, которые не должны быть доступными извне класса. Также есть закрытый метод `_checkBalance()`, который может быть использован только внутри класса.

Применение ООП в реальном проекте

Давайте рассмотрим более сложный пример, в котором мы используем ООП для разработки простого приложения учета задач (To-Do List). Мы создадим классы `Task` и `TaskList` для представления задач и списка задач.

«`javascript

class Task {

constructor(title, description) {

this.title = title;

this.description = description;

this.completed = false;

}

complete() {

this.completed = true;

}

}

class TaskList {

constructor() {

this.tasks = [];

}

addTask(task) {

this.tasks.push(task);

}

removeTask(task) {

const index = this.tasks.indexOf(task);

if (index !== -1) {

this.tasks.splice(index, 1);

}

}

}

// Создание объектов задач и списка задач

const task1 = new Task(«Завершить статью», «Завершить написание статьи о ООП в JavaScript.»);

const task2 = new Task(«Прочитать книгу», «Прочитать новую книгу по программированию.»);

const taskList = new TaskList();

// Добавление задач в список и их завершение

taskList.addTask(task1);

taskList.addTask(task2);

task1.complete();

// Вывод списка задач

console.log(«Список задач:»);

for (const task of taskList.tasks) {

console.log(`- ${task.title} (${task.completed ? «Завершено» : «Не завершено»})`);

}

«`

В этом примере мы создаем классы `Task` и `TaskList`, где `Task` представляет отдельную задачу, а `TaskList` представляет список задач. Мы можем добавлять и удалять задачи из списка и отмечать их как завершенные.

Заключение

Использование объектно-ориентированного программирования (ООП) в JavaScript – метод, упрощающий создание и дальнейшую поддержку сайтов и веб-приложений. Здесь мы представили пример использования ООП для разработки простого приложения учета задач.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно