Наследование — JS: Погружаясь в классы

• Цепочка наследования
• Оператор проверки типа

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

Механизм наследования — сложная система. Поэтому изучаться он будет в несколько приемов, на протяжении всего курса. Кроме того, не забываем что говоря про классы в JavaScript, мы на самом деле говорим про прототипы.

Рассмотрим наследование на примере структуры HTML. Каждый тег в HTML по-своему уникален. С другой стороны, все они имеют общие атрибуты и некоторые другие характеристики. Попробуем отобразить это с помощью иерархии классов.

// Базовый класс для всех тегов. Умеет работать с атрибутами.
class HTMLElement {
  constructor(attributes = {}) {
    this.attributes = attributes;
  }

  setAttribute(key, value) {
    this.attributes[key] = value;
  }

  getAttribute(key) {
    return this.attributes[key];
  }

  getTextContent() {
    return this.body;
  }

  setTextContent(body) {
    this.body = body;
  }

  stringifyAttributes() {
    // build: key="value" key2="value2"
  }
}

Конкретные элементы, представленные тегами в HTML, наследуют этот класс:

// Anchor — это ссылка. Класс HTMLAnchorElement описывает тег «a».
// Наследование выполняется через ключевое слово extends
class HTMLAnchorElement extends HTMLElement {
  toString() {
    // Родительский метод
    const attrLine = this.stringifyAttributes();
    // Родительский метод
    const body = this.getTextContent();
    return `<a${attrLine}>${body}</a>`;
  }
}

Наследование записывается так: A extends B. Эта запись означает, что класс A наследует класс B. Теперь посмотрим, как работает наследование:

// Конструктор родителя
const anchor = new HTMLAnchorElement({ href: 'https://ru.hexlet.io' });
anchor.setTextContent('Hexlet');
console.log(`Anchor: ${anchor}`); // toString() вызывается автоматически
// => Anchor: <a href="https://ru.hexlet.io">Hexlet</a>

Внутри HTMLAnchorElement нет определения конструктора, но благодаря наследованию, этот класс имеет доступ ко всем свойствам суперкласса. JavaScript вызывает их автоматически при обращении к ним. В свою очередь, внутри toString() вызываются методы, которых нет в текущих классах, поэтому они также берутся из родительского класса.

Цепочка наследования

Наследование классов в JavaScript — одиночное. Другими словами, наследоваться можно только от одного класса. Точно так же как и в Java. Множественное наследование в этих языках было убрано специально, из-за его высокой сложности и проблем, которые оно добавляет (например, коллизии методов и свойств). С другой стороны, сама по себе цепочка наследования может быть сколь угодно глубокой:

class D {}
class C extends D {}
class B extends C {}
class A extends B {}

Оператор проверки типа

Оператор instanceof учитывает классы из цепочки наследования прототипов:

const anchor = new HTMLAnchorElement();
if (anchor instanceof HTMLElement) {
    console.log('!!!');
}
// => !!!

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

Дополнительные материалы

1. Наследование (Wiki)

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»