Карта сайта

Урок 27: Основы ООП в JavaScript’е

/Уроки по JavaScript/Урок 27: Основы ООП в JavaScript’е
Урок 27: Основы ООП в JavaScript’е
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

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

Что такое объектно-ориентированное программирование?

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

Основные принципы ООП:

  1. Инкапсуляция — сокрытие внутренней логики объекта и предоставление безопасного интерфейса для работы с ним.
  2. Наследование — возможность создавать новые классы на основе существующих, переиспользуя их функциональность.
  3. Полиморфизм — способность объектов с одинаковым интерфейсом иметь разную реализацию.
  4. Абстракция — упрощение сложных систем путем выделения ключевых характеристик.

В JavaScript ООП реализовано через прототипы, но с появлением ES6 синтаксис стал ближе к классическим классам, как в Java или C++. Это сделало код более понятным для новичков.

Классы и объекты в JavaScript

Что такое класс?

Класс это шаблон для создания объектов. Он определяет, какие свойства и методы будут у объектов.

Пример создания класса:

class User {
  // Конструктор — специальный метод для инициализации объекта
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // Метод класса
  greet() {
    console.log(`Привет, меня зовут ${this.name}!`);
  }
}

Создание объекта (экземпляра класса)

const user1 = new User("Максим", "max@example.com");
user1.greet(); // Выведет: "Привет, меня зовут Максим!"

Здесь user1это объект, созданный на основе класса User. У него есть свойства name и email, а также метод greet().

Практическая задача: Создайте класс «Книга»

Условие:
Создайте класс Book, который имеет:

  • Свойства: title (название), author (автор), year (год издания).
  • Метод getInfo(), возвращающий строку: «[Название] написан(а) [Автор] в [Год]».

Решение:

class Book {
  constructor(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
  }

  getInfo() {
    return `${this.title} написан(а) ${this.author} в ${this.year}`;
  }
}

const book1 = new Book("1984", "Джордж Оруэлл", 1949);
console.log(book1.getInfo()); // "1984 написан(а) Джордж Оруэлл в 1949"

Наследование в JavaScript

Наследование позволяет создавать дочерние классы, которые наследуют свойства и методы родительского класса. Это помогает избежать дублирования кода.

Ключевые слова extends и super

  • extends — указывает, какой класс наследуется.
  • super() — вызывает конструктор родительского класса.

Пример:
Допустим, у нас есть класс Animal, и мы хотим создать подкласс Cat.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

class Cat extends Animal {
  constructor(name, color) {
    super(name); // Вызов конструктора родителя
    this.color = color;
  }

  // Переопределение метода
  speak() {
    console.log(`${this.name} мяукает!`);
  }

  // Новый метод
  purr() {
    console.log("Муррр...");
  }
}

const barsik = new Cat("Барсик", "рыжий");
barsik.speak(); // "Барсик мяукает!"
barsik.purr();  // "Муррр..."

Практическая задача: Наследование для класса «Транспорт»

Условие:

  1. Создайте класс Transport со свойствами type (тип транспорта) и speed (скорость).
  2. Добавьте метод move(), который выводит: «[Тип] движется со скоростью [скорость] км/ч».
  3. Создайте подкласс Car, который добавляет свойство brand (марка) и переопределяет move(), добавляя к сообщению «… и гудит!».

Решение:

class Transport {
  constructor(type, speed) {
    this.type = type;
    this.speed = speed;
  }

  move() {
    console.log(`${this.type} движется со скоростью ${this.speed} км/ч`);
  }
}

class Car extends Transport {
  constructor(type, speed, brand) {
    super(type, speed);
    this.brand = brand;
  }

  move() {
    super.move(); // Вызов метода родителя
    console.log("... и гудит!");
  }
}

const toyota = new Car("Автомобиль", 120, "Toyota");
toyota.move(); 
// Выведет:
// "Автомобиль движется со скоростью 120 км/ч"
// "... и гудит!"

Практические задачи для закрепления

Задача 1: Класс «Банковский счет»

Создайте класс BankAccount со свойствами owner (владелец) и balance (баланс). Добавьте методы:

  • deposit(amount) — пополняет баланс.
  • withdraw(amount) — снимает деньги, если на счету достаточно средств.

Подсказка:

class BankAccount {
  constructor(owner, balance = 0) {
    this.owner = owner;
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  withdraw(amount) {
    if (amount > this.balance) {
      console.log("Недостаточно средств!");
      return;
    }
    this.balance -= amount;
  }
}

Задача 2: Наследование для «Электромобиля»

Расширьте класс Car из предыдущего примера, создав подкласс ElectricCar, который добавляет свойство batteryLife (заряд батареи в %) и метод charge(), увеличивающий заряд на 10%.

Итоги урока

  • ООП помогает структурировать код через объекты и классы.
  • Классы это шаблоны для создания объектов с методами и свойствами.
  • Наследование позволяет переиспользовать код и создавать иерархии классов.

Теперь вы понимаете основы ООП в JavaScript. Полный курс «JavaScript для начинающих» доступен здесь — https://max-gabov.ru/javascript-dlya-nachinaushih