ООП в JavaScript без академического тумана

ООП в JavaScript часто объясняют так, что новичок начинает сомневаться, туда ли он вообще зашел. Прототипы, наследование, инкапсуляция, полиморфизм, this, классы, конструкторы — слов много, а кнопка на странице как не работала, так и не работает

Я бы начинал проще: объект — это способ держать данные и действия рядом. Например, товар: у него есть название, цена, скидка и метод, который считает итоговую цену

С этого и начнем

Содержание

Объект без классов
Зачем нужны class
Что делает constructor
this простыми словами
Рендерим карточки товаров
Это уже ООП?
Наследование: очень коротко
Частые ошибки
Забыли new
Потеряли this
Пихают классы везде
Смешивают данные и DOM слишком рано
Мини-задание
Ответы на эти вопросы могут быть для вас полезными
Что такое ООП в JavaScript?
Нужно ли учить классы новичку?
Что делает constructor?
Что такое this?
Всегда ли нужно использовать ООП?
Что почитать дальше по JavaScript

Объект без классов

const product = {
  title: "Курс по JavaScript",
  price: 7900,
  discount: 10,
  getFinalPrice() {
    return this.price - (this.price * this.discount / 100);
  }
};

console.log(product.title);
console.log(product.getFinalPrice());

У объекта есть свойства:

title;
price;
discount.

И метод:

getFinalPrice.

Метод — это функция внутри объекта. this внутри метода ссылается на текущий объект product

Зачем нужны class

Один объект можно создать руками. Но если товаров много, копировать структуру неудобно:

const product1 = { ... };
const product2 = { ... };
const product3 = { ... };

Класс помогает описать шаблон, по которому создаются похожие объекты

class Product {
  constructor(title, price, discount) {
    this.title = title;
    this.price = price;
    this.discount = discount;
  }

  getFinalPrice() {
    return this.price - (this.price * this.discount / 100);
  }
}

Теперь можно создавать товары:

const course = new Product("Курс по JavaScript", 7900, 10);
const template = new Product("Шаблон лендинга", 3900, 0);

console.log(course.getFinalPrice());
console.log(template.getFinalPrice());

Что делает constructor

constructor запускается при создании нового объекта через new

const course = new Product("Курс по JavaScript", 7900, 10);

Аргументы попадают сюда:

constructor(title, price, discount) {
  this.title = title;
  this.price = price;
  this.discount = discount;
}

То есть мы говорим: у каждого нового продукта будут свои title, price, discount

this простыми словами

this — это "этот объект"

Внутри:

getFinalPrice() {
  return this.price - (this.price * this.discount / 100);
}

this.price означает цену конкретного продукта, для которого вызвали метод

Если вызвать:

course.getFinalPrice();

this будет course

Если вызвать:

template.getFinalPrice();

this будет template

Рендерим карточки товаров

Теперь сделаем пример ближе к сайту

HTML:

<div class="products"></div>

JavaScript:

class Product {
  constructor(title, price, discount) {
    this.title = title;
    this.price = price;
    this.discount = discount;
  }

  getFinalPrice() {
    return this.price - (this.price * this.discount / 100);
  }

  render() {
    return `
      <article class="product-card">
        <h2>${this.title}</h2>
        <p>Цена: ${this.price} руб.</p>
        <p>Скидка: ${this.discount}%</p>
        <strong>Итого: ${this.getFinalPrice()} руб.</strong>
      </article>
    `;
  }
}

const products = [
  new Product("Курс по JavaScript", 7900, 10),
  new Product("Шаблон лендинга", 3900, 0),
  new Product("Консультация", 4500, 15)
];

const container = document.querySelector(".products");

container.innerHTML = products
  .map((product) => product.render())
  .join("");

Мы описали поведение товара один раз, а потом создали несколько объектов

Это уже ООП?

Да, на практическом уровне это уже объектно-ориентированный подход:

данные товара лежат внутри объекта;
методы работают с этими данными;
класс задает шаблон;
новые товары создаются через new Product.

Не обязательно сразу спорить о "настоящем ООП". Для новичка важнее увидеть пользу: меньше копипасты и понятнее структура

Наследование: очень коротко

Иногда один класс расширяет другой. Например, цифровой товар:

class DigitalProduct extends Product {
  constructor(title, price, discount, fileSize) {
    super(title, price, discount);
    this.fileSize = fileSize;
  }

  render() {
    return `
      ${super.render()}
      <p>Размер файла: ${this.fileSize} MB</p>
    `;
  }
}

extends говорит: DigitalProduct наследуется от Product. super вызывает логику родительского класса

Но я бы не начинал с наследования. В реальных frontend-проектах часто достаточно объектов, функций и простых классов

Частые ошибки

Забыли new

const course = Product("Курс", 7900, 10);

Для класса нужно:

const course = new Product("Курс", 7900, 10);

Потеряли this

Если вытащить метод отдельно, this может потеряться:

const getPrice = course.getFinalPrice;
console.log(getPrice());

Для первых уроков просто вызывай метод через объект:

course.getFinalPrice();

Пихают классы везде

Не каждый код нужно превращать в класс. Если задача маленькая, обычная функция может быть понятнее

Смешивают данные и DOM слишком рано

Сначала полезно сделать класс, который считает цену. Потом добавить render. Не надо сразу усложнять все интерфейсом

Мини-задание

Создай класс User:

name;
email;
метод getStatus().

Пример:

class User {
  constructor(name, email, isSubscribed) {
    this.name = name;
    this.email = email;
    this.isSubscribed = isSubscribed;
  }

  getStatus() {
    if (this.isSubscribed) {
      return "Подписан";
    }

    return "Не подписан";
  }
}

const user = new User("Анна", "anna@example.com", true);
console.log(user.getStatus());

Потом сделай массив пользователей и выведи их статусы на страницу

Ответы на эти вопросы могут быть для вас полезными

Что такое ООП в JavaScript?

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

Нужно ли учить классы новичку?

Да, но не в первый час. Сначала лучше понять объекты, функции и события. Потом классы заходят легче

Что делает constructor?

Он запускается при создании объекта через new и задает начальные свойства объекта

Что такое this?

this обычно указывает на объект, для которого вызван метод. В JavaScript есть нюансы, но для старта важно запомнить вызов через объект: product.getFinalPrice()