⚡ JavaScript

ООП: Наследование в JavaScript (Node.js): подробное руководство

Урок 17 / 35 • Полная теория для чтения

Что это такое и зачем? (аналогия из реальной жизни)

Представь, что ты решил создать свою видеоигру. В ней будут разные персонажи: эльфы, орки, маги и драконы. У каждого из них есть общие свойства: имя, уровень здоровья, количество очков опыта. Также у всех есть общие действия: бежать, атаковать, получать урон.

Если бы ты писал код для каждого персонажа с нуля, тебе пришлось бы сотни раз повторять одно и то же: описывать имя, здоровье, опыт, писать функции для бега и атаки. Это было бы очень долго, скучно и, главное, в коде легко запутаться. А что, если ты захочешь добавить всем персонажам новое свойство, например, «мана»? Пришлось бы переписывать код для каждого класса!

Вот тут на помощь и приходит наследование. Это механизм, который позволяет создать один общий класс (назовём его «Персонаж»), в котором описаны все общие свойства и методы. А затем для каждого конкретного типа персонажа (Эльф, Орк, Маг) мы создаём свои классы, которые наследуют всё от класса «Персонаж», но при этом могут добавлять что-то своё.

Простая аналогия: Представь, что у тебя есть базовый рецепт теста для пиццы. Это «родительский» рецепт. А теперь ты хочешь сделать пиццу «Маргариту» и «Пепперони». Ты не придумываешь тесто заново — ты берёшь базовый рецепт (наследуешь его) и просто добавляешь свои ингредиенты сверху. Наследование в программировании работает точно так же.

Зачем это нужно в реальной разработке?

Экономия времени: не нужно писать один и тот же код повторно.
Удобство поддержки: если нужно исправить ошибку в общем поведении, ты меняешь код только в родительском классе, и все дочерние классы получают исправление автоматически.
Логичность: код становится более структурированным и понятным для других разработчиков.

Теория: как это работает изнутри

В основе наследования лежит понятие прототипа. В JavaScript (в отличие от классических языков вроде Java или C++) нет «настоящих» классов в классическом понимании. То, что мы называем классами — это синтаксический сахар над прототипным наследованием.

Давай разберёмся, что это значит. У каждого объекта в JavaScript есть скрытое свойство [[Prototype]] (к которому мы можем обратиться через __proto__ или методы Object.getPrototypeOf). Это свойство указывает на другой объект — прототип.

Когда ты пытаешься обратиться к свойству или методу объекта, JavaScript сначала ищет его в самом объекте. Если не находит — он идёт в прототип этого объекта. Если и там нет — идёт в прототип прототипа, и так далее, пока не дойдёт до null. Эта цепочка называется цепочкой прототипов.

Важно: Классы в JavaScript (появившиеся в ES6) — это просто «обёртка» над прототипами, которая делает код более привычным для разработчиков, пришедших из Java или C++. Под капотом всё равно работают прототипы.

Когда мы пишем class Child extends Parent, мы говорим JavaScript: «Сделай так, чтобы прототип класса Child указывал на класс Parent». Теперь, если у объекта класса Child нет какого-то метода, JavaScript будет искать его у Parent.

Как это выглядит в памяти:

Есть функция-конструктор Parent (или класс). У неё есть свойство prototype — это объект, который станет прототипом для всех экземпляров.
Когда мы создаём new Child(), JavaScript создаёт пустой объект, устанавливает его прототип (__proto__) на Child.prototype.
Но Child.prototype сам является объектом, чей прототип (__proto__) указывает на Parent.prototype.
Таким образом, выстраивается цепочка: экземпляр → Child.prototype → Parent.prototype → Object.prototype → null.

Ключевое слово super: Когда ты переопределяешь метод в дочернем классе, но хочешь также вызвать родительскую версию этого метода, ты используешь super. Это как сказать: «Сделай то, что делает родитель, а потом добавь ещё кое-что от себя».

Синтаксис в JavaScript (Node.js): все формы и варианты

В JavaScript есть несколько способов реализовать наследование. Мы рассмотрим современный синтаксис (классы) и классический (прототипы), чтобы ты понимал, как это работает «под капотом».

1. Современный синтаксис (ES6+): ключевое слово `class` и `extends`

Это самый распространённый и рекомендуемый способ в современном JavaScript (особенно в Node.js).

// Родительский класс (базовый)
class Animal {
  // Конструктор вызывается при создании нового объекта
  constructor(name) {
    this.name = name; // Свойство name
  }

  // Метод, который будет унаследован
  speak() {
    console.log(`${this.name} издаёт звук.`);
  }
}

// Дочерний класс, который наследует Animal
class Dog extends Animal {
  constructor(name, breed) {
    // super() вызывает конструктор родительского класса
    // Это обязательно нужно сделать до использования this
    super(name);
    this.breed = breed; // Новое свойство, которого нет у Animal
  }

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

  // Новый метод, которого нет у Animal
  fetch() {
    console.log(`${this.name} приносит палку.`);
  }
}

// Создаём экземпляры
const genericAnimal = new Animal('Существо');
genericAnimal.speak(); // Существо издаёт звук.

const myDog = new Dog('Бобик', 'Такса');
myDog.speak(); // Бобик гавкает! (переопределённый метод)
myDog.fetch(); // Бобик приносит палку. (новый метод)
console.log(myDog.breed); // Такса

2. Наследование через функции-конструкторы (старый способ)

До появления классов в ES6 наследование реализовывали через функции и прототипы. Этот код всё ещё можно встретить в старых проектах.

// Родительская функция-конструктор
function Animal(name) {
  this.name = name;
}

// Добавляем метод в прототип
Animal.prototype.speak = function() {
  console.log(this.name + ' издаёт звук.');
};

// Дочерняя функция-конструктор
function Dog(name, breed) {
  // Вызываем родительский конструктор с контекстом текущего объекта
  Animal.call(this, name);
  this.breed = breed;
}

// Устанавливаем прототип: создаём новый объект от Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
// Восстанавливаем конструктор (иначе он будет указывать на Animal)
Dog.prototype.constructor = Dog;

// Переопределяем метод
Dog.prototype.speak = function() {
  console.log(this.name + ' гавкает!');
};

// Добавляем новый метод
Dog.prototype.fetch = function() {
  console.log(this.name + ' приносит палку.');
};

const myDog = new Dog('Рекс', 'Овчарка');
myDog.speak(); // Рекс гавкает!
myDog.fetch(); // Рекс приносит палку.

Замечание: Современный синтаксис class делает то же самое, но код становится чище и понятнее. В новых проектах на Node.js всегда используй class.

3. Наследование встроенных классов

В JavaScript можно наследовать встроенные классы, такие как Array, Map, Error и другие. Это очень мощный приём.

// Создаём свой класс массива с дополнительным методом
class MyArray extends Array {
  // Метод, который возвращает сумму всех элементов
  sum() {
    return this.reduce((acc, val) => acc + val, 0);
  }

  // Переопределяем метод push, чтобы он логировал действие
  push(...items) {
    console.log(`Добавляем элементы: ${items}`);
    // super.push() вызывает оригинальный метод push из Array
    return super.push(...items);
  }
}

const numbers = new MyArray(1, 2, 3);
numbers.push(4); // Добавляем элементы: 4
console.log(numbers.sum()); // 10 (1+2+3+4)
console.log(numbers.length); // 4

Примеры кода — от простого к сложному

Пример 1: Базовое наследование (геометрические фигуры)

// Базовый класс для всех фигур
class Shape {
  constructor(color) {
    this.color = color;
  }

  // Метод, который будут переопределять дочерние классы
  getArea() {
    return 0; // По умолчанию площадь неизвестна
  }

  describe() {
    console.log(`Это фигура цвета ${this.color}.`);
  }
}

// Круг наследует Shape
class Circle extends Shape {
  constructor(color, radius) {
    super(color); // Вызываем конструктор родителя
    this.radius = radius;
  }

  // Переопределяем метод getArea
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

// Прямоугольник наследует Shape
class Rectangle extends Shape {
  constructor(color, width, height) {
    super(color);
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const redCircle = new Circle('красный', 5);
redCircle.describe(); // Это фигура цвета красный.
console.log(redCircle.getArea()); // 78.53981633974483

const blueRectangle = new Rectangle('синий', 4, 6);
blueRectangle.describe(); // Это фигура цвета синий.
console.log(blueRectangle.getArea()); // 24

Пример 2: Цепочка наследования (многоуровневое наследование)

// Базовый класс: Транспорт
class Vehicle {
  constructor(speed) {
    this.speed = speed;
  }

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

// Промежуточный класс: Наземный транспорт
class LandVehicle extends Vehicle {
  constructor(speed, wheels) {
    super(speed);
    this.wheels = wheels;
  }

  drive() {
    console.log(`Едет по дороге на ${this.wheels} колёсах.`);
  }
}

// Конечный класс: Автомобиль
class Car extends LandVehicle {
  constructor(speed, wheels, brand) {
    super(speed, wheels);
    this.brand = brand;
  }

  // Переопределяем move
  move() {
    console.log(`Автомобиль ${this.brand} мчится!`);
    // Вызываем родительский метод move
    super.move();
  }
}

const myCar = new Car(120, 4, 'Toyota');
myCar.move();
// Автомобиль Toyota мчится!
// Транспорт движется со скоростью 120 км/ч.
myCar.drive(); // Едет по дороге на 4 колёсах.

Пример 3: Проверка принадлежности к классу (instanceof)

class Animal {}
class Mammal extends Animal {}
class Dog extends Mammal {}

const myPet = new Dog();

console.log(myPet instanceof Dog);     // true
console.log(myPet instanceof Mammal);  // true (наследуется)
console.log(myPet instanceof Animal);  // true (наследуется)
console.log(myPet instanceof Object);  // true (все объекты наследуют от Object)
console.log(myPet instanceof Array);   // false

Пример 4: Статические методы и наследование

class Parent {
  static greet() {
    return 'Привет от родителя!';
  }

  static getParentInfo() {
    return 'Я родительский класс.';
  }
}

class Child extends Parent {
  static greet() {
    // Вызываем статический метод родителя через super
    return super.greet() + ' И привет от дочернего класса!';
  }
}

console.log(Parent.greet()); // Привет от родителя!
console.log(Child.greet());  // Привет от родителя! И привет от дочернего класса!
console.log(Child.getParentInfo()); // Я родительский класс. (унаследован)

Пример 5: Геттеры и сеттеры при наследовании

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(' ');
  }
}

class Admin extends User {
  constructor(firstName, lastName, role) {
    super(firstName, lastName);
    this.role = role;
  }

  // Переопределяем геттер
  get fullName() {
    // Используем super, чтобы получить результат от родителя
    return `[${this.role}] ${super.fullName}`;
  }
}

const admin = new Admin('Иван', 'Петров', 'Администратор');
console.log(admin.fullName); // [Администратор] Иван Петров
admin.fullName = 'Мария Сидорова';
console.log(admin.fullName); // [Администратор] Мария Сидорова

Пример 6: Приватные поля и наследование

class Base {
  // Приватное поле (доступно только внутри класса)
  #secret = 'Это секрет!';

  getSecret() {
    return this.#secret;
  }

  // Защищённое поле (по соглашению, с _)
  _protectedField = 'Доступно наследникам';
}

class Derived extends Base {
  reveal() {
    // console.log(this.#secret); // Ошибка! Приватное поле недоступно
    console.log(this._protectedField); // Работает
    console.log(this.getSecret()); // Работает через публичный метод
  }
}

const obj = new Derived();
obj.reveal();
// Доступно наследникам
// Это секрет!

Важно: Приватные поля (с #) не наследуются. Дочерний класс не имеет к ним прямого доступа. Это сделано для инкапсуляции.

Пример 7: Абстрактный класс (имитация через ошибки)

В JavaScript нет нативной поддержки абстрактных классов, но их можно имитировать.

class AbstractDatabase {
  constructor() {
    if (new.target === AbstractDatabase) {
      throw new Error('Нельзя создать экземпляр абстрактного класса!');
    }
  }

  // Абстрактный метод (должен быть переопределён)
  connect() {
    throw new Error('Метод connect() должен быть переопределён!');
  }

  // Абстрактный метод
  disconnect() {
    throw new Error('Метод disconnect() должен быть переопределён!');
  }
}

class MySQLDatabase extends AbstractDatabase {
  connect() {
    console.log('Подключение к MySQL...');
  }

  disconnect() {
    console.log('Отключение от MySQL...');
  }
}

// const db = new AbstractDatabase(); // Ошибка!
const mysql = new MySQLDatabase();
mysql.connect(); // Подключение к MySQL...
mysql.disconnect(); // Отключение от MySQL...

Сравнение с Python: чем похоже и чем отличается

Характеристика	JavaScript (Node.js)	Python
Ключевые слова	`class`, `extends`, `super`	`class`, `(ParentClass)`, `super()`
Тип наследования	Прототипное (классы — синтаксический сахар)	Классическое (на основе классов)
Множественное наследование	Нет (только один родитель)	Да (можно наследовать от нескольких классов)
Вызов родительского конструктора	`super()` — обязательно в дочернем конструкторе	`super().__init__()` — не обязательно, но рекомендуется
Приватные поля	`#field` (настоящие приватные)	`__field` (name mangling, не настоящие приватные)
Абстрактные классы	Нет встроенной поддержки (имитация через ошибки)	Есть через модуль `abc` (Abstract Base Classes)
Статические методы	`static method()`	`@staticmethod` или `@classmethod`
Проверка типа	`instanceof`	`isinstance()`
Перегрузка методов	Нет (последнее определение перезаписывает предыдущее)	Нет (но можно через args и *kwargs)

Главное отличие: В Python классы — это «настоящие» классы, а в JavaScript — это прототипы, «притворяющиеся» классами. На практике для большинства задач разница незаметна, но понимание прототипов в JS критически важно для отладки сложных багов.

Типичные ошибки и подводные камни

Ошибка 1: Забыть вызвать `super()` в конструкторе

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

class Child extends Parent {
  constructor(name, age) {
    // Забыли super(name)
    this.age = age; // Ошибка! Must call super constructor before using 'this'
  }
}

// const child = new Child('Иван', 10); // ReferenceError

Решение: Всегда вызывай super() первым делом в конструкторе дочернего класса.

Ошибка 2: Неправильное понимание `this` в унаследованных методах

class Parent {
  constructor() {
    this.name = 'Родитель';
  }

  greet() {
    console.log(`Привет, я ${this.name}`);
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.name = 'Ребёнок';
  }
}

const obj = new Child();
const func = obj.greet;
func(); // Привет, я undefined (потеря контекста)

Решение: Используй стрелочные функции или .bind(this) для методов, которые передаются как колбэки.

Ошибка 3: Создание глубоких цепочек наследования

Не делай наследование глубже 3-4 уровней. Это усложняет понимание кода и замедляет поиск свойств по цепочке прототипов.

// Плохо: A -> B -> C -> D -> E
class A {}
class B extends A {}
class C extends B {}
class D extends C {}
class E extends D {}

// Лучше: Композиция вместо наследования

Ошибка 4: Путаница между `proto` и `prototype`

prototype — свойство функции-конструктора (класса). Оно определяет, какой объект станет прототипом для новых экземпляров.
__proto__ — свойство конкретного экземпляра, которое указывает на его прототип.

class MyClass {}
const obj = new MyClass();

console.log(MyClass.prototype); // Объект с конструктором
console.log(obj.__proto__);     // Тот же объект
console.log(obj.__proto__ === MyClass.prototype); // true

Ошибка 5: Переопределение метода без вызова родительского

Иногда нужно дополнить родительский метод, а не заменить его полностью. Забыв вызвать super.method(), ты теряешь важную функциональность.

class Database {
  save(data) {
    console.log('Валидация данных...');
    // ... логика сохранения
  }
}

class UserDatabase extends Database {
  save(data) {
    // Забыли super.save(data)
    console.log('Сохраняем пользователя...');
    // Валидация не выполнится!
  }
}

Лучшие практики и советы профессионалов

Используй композицию вместо наследования, где возможно. Принцип «Favor composition over inheritance» (Предпочитай композицию наследованию) — золотое правило ООП. Если класс можно собрать из других классов (как конструктор Lego), не создавай глубокую иерархию.
Не делай наследование ради наследования. Спрашивай себя: «Действительно ли класс B является разновидностью класса A?» Если нет — возможно, нужна композиция.
Используй super для вызова родительских методов. Это делает код более гибким и позволяет легко добавлять функциональность, не дублируя код.
Делай классы маленькими и сфокусированными. Каждый класс должен отвечать за одну задачу (принцип единственной ответственности).
Избегай наследования от встроенных классов без необходимости. Хотя это возможно, это может привести к неожиданному поведению. Например, наследование от Array может сломаться при использовании методов, возвращающих новый массив (как map или filter).
Документируй, какие методы ожидаются от наследников. Если ты создаёшь базовый класс, который предполагает переопределение методов, явно укажи это в комментариях или используй имитацию абстрактных классов.
Тестируй наследование. Убедись, что все методы работают корректно как для родительского, так и для дочерних классов.

Вопросы для самопроверки

Вопрос: Что такое наследование в ООП? Приведи пример из реальной жизни.

Ответ: Это механизм, позволяющий создать новый класс на основе существующего, перенимая его свойства и методы. Пример: класс «Автомобиль» наследует от класса «Транспортное средство».
Вопрос: Какое ключевое слово используется в JavaScript для указания родительского класса?

Ответ: extends. Пример: class Dog extends Animal {}.
Вопрос: Зачем нужно вызывать super() в конструкторе дочернего класса?

Ответ: Чтобы вызвать конструктор родительского класса и инициализировать унаследованные свойства. Без этого нельзя использовать this в дочернем конструкторе.
Вопрос: Можно ли в JavaScript наследовать от нескольких классов одновременно?

Ответ: Нет, в JavaScript нет множественного наследования классов. Один класс может наследовать только от одного родителя.
Вопрос: Что такое цепочка прототипов?

Ответ: Это механизм, при котором JavaScript ищет свойства и методы объекта, поднимаясь по цепочке от самого объекта к его прототипу, затем к прототипу прототипа и так далее до null.
Вопрос: Как проверить, является ли объект экземпляром определённого класса (включая родительские)?

Ответ: Использовать оператор instanceof. Пример: obj instanceof ParentClass.
Вопрос: В чём разница между prototype и __proto__?

Ответ: prototype — это свойство функции-конструктора, которое определяет прототип для новых объектов. __proto__ — это свойство конкретного объекта, которое указывает на его прототип.
Вопрос: Можно ли переопределить метод родительского класса в дочернем? Как при этом вызвать родительскую версию метода?

Ответ: Да, можно. Для вызова родительской версии используется super.methodName().
Вопрос: Что такое «абстрактный класс» и есть ли он в JavaScript?

Ответ: Абстрактный класс — это класс, который нельзя инстанцировать напрямую. В JavaScript нет встроенной поддержки, но можно имитировать, выбрасывая ошибку в конструкторе.
Вопрос: Какая главная опасность слишком глубокого наследования?

Ответ: Код становится сложным для понимания и поддержки. Изменение в одном классе может неожиданно повлиять на множество наследников. Рекомендуется ограничивать глубину наследования 2-3 уровнями.

Итог и что изучить дальше

Мы разобрали одну из трёх основных концепций ООП — наследование. Ты узнал:

Что это такое и зачем нужно (аналогия с рецептом пиццы).
Как работает под капотом (цепочка прототипов).
Как писать код с наследованием в JavaScript (классы, extends, super).
Какие бывают подводные камни и как их избежать.
Чем JavaScript отличается от Python в этом аспекте.

Что изучать дальше:

Полиморфизм — способность объектов разных классов отвечать на одни и те же методы по-своему. Мы уже коснулись этого, когда переопределяли метод speak().
Инкапсуляция — сокрытие внутреннего состояния объекта. Приватные поля (#) и геттеры/сеттеры.
Композиция — альтернатива наследованию, когда объект содержит другие объекты, а не наследует их поведение.
Принципы SOLID — пять принципов проектирования классов, которые помогут писать качественный код.
Паттерны проектирования — типовые решения для часто встречающихся задач (например, «Фабрика», «Одиночка», «Наблюдатель»).

Помни: наследование — мощный инструмент, но, как и любой инструмент, его нужно использовать с умом. Не пытайся «воткнуть» наследование везде, где можно. Иногда проще и правильнее написать новый класс с нуля или использовать композицию. Удачи в изучении!

← Предыдущая ООП: Классы и объекты в JavaScript (Node.js): подр Вперёд → ООП: Инкапсуляция и полиморфизм в JavaScript (Node