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

Устранение дублирования кода — не единственная задача наследования классов. Иногда оно применяется для изменения существующего поведения базового класса.

Тег <select> в браузере представлен классом HTMLSelectElement. У него есть дополнительные методы, которые нужны для работы со списком элементов. Один из таких методов: item(index). С его помощью можно извлекать конкретный вариант из списка.

<select name="variants">
  <option>Opt 1</option>
  <option>Opt 2</option>
  <option>Opt 3</option>
</select>

// Гипотетический код, который возвращает элемент выше в виде объекта класса HTMLSelectElement
const element = document.querySelector('select');

element.item(0); // HTMLOptionElement(textContent="Opt 1")
element.item(1); // HTMLOptionElement(textContent="Opt 2")

Представим себе, что нам нужно часто обращаться к элементам этого списка с конца. Для этого постоянно придется выполнять подобный код:

// Свойство length описывает число option элементов внутри select
element.item(element.length - 1);

В этом коде нет ничего криминального, но можно лучше. Один из возможных вариантов решения этой задачи состоит в том, чтобы расширить поведение метода и научить его работать с отрицательными числами. Возможность обращаться к индексам в обратном порядке — распространенная практика во многих языках.

// Последний элемент
element.item(-1); // HTMLOptionElement(textContent="Opt 3")
// Третий с конца
element.item(-3); // HTMLOptionElement(textContent="Opt 1")

Как это сделать? Наследование дает возможность переопределять методы суперклассов. Посмотрите на пример:

class HTMLCustomSelectElement extends HTMLSelectElement {
  item(possibleIndex) {
    const realIndex = possibleIndex >= 0 ? possibleIndex : this.length + possibleIndex;
    // super указывает на родительский класс
    return super.item(realIndex);
  }
}

Выше создан подкласс HTMLCustomSelectElement, который переопределяет метод item(index). Переопределение означает, что в подклассе создается метод с тем же именем, что и в родительском классе. Наш новый метод выполняет дополнительную работу по вычислению индекса, но ему все еще нужен исходный метод item(index), для выборки нужного элемента. Для этого применяется специальный синтаксис, который указывает явно что нужно взять метод из родительского класса: super.item(realIndex).

Почему понадобился специальный синтаксис? Представьте, что вместо него там был бы такой код:

item(possibleIndex) {
  this.item(possibleIndex);
}

Какой в этом случае метод item() нужно брать — в определении которого мы находимся прямо сейчас или родительский? Наследование так устроено, что всегда выбирается тот метод, который находится ближе в цепочке наследования. Поэтому вызов через this породит рекурсию, но родительский метод никогда не будет вызван.

По этой же причине, снаружи объекта невозможно вызвать методы родительского класса, которые были переопределены в наследниках:

const select = new HTMLCustomSelectElement();

// Этот вызов всегда относится к методу item, переопределенному внутри HTMLCustomSelectElement
// Вызвать item напрямую из HTMLSelectElement невозможно
select.item(3);

Переопределение не ограничивается одним уровнем наследования. Любой переопределенный метод можно снова переопределить в наследниках текущего класса.

Немного по-другому работает вызов конструктора родительского класса. Для этого достаточно использовать super как функцию:

// Родительский класс
class HTMLElement {
  constructor(attributes = {}) {
    this.attributes = attributes;
  }

  // ...
}

// Дочерний класс
class HTMLSelectElement extends HTMLElement {
  constructor(attributes) {
    super(attributes);
    this.tagName = 'SELECT';
  }
}

const selectElement = new HTMLSelectElement({ class: 'form-select' });
console.log(selectElement.attributes); // => { class: 'form-select' }
console.log(selectElement.tagName); // => 'SELECT'

В примере выше super(attributes) вызывает конструктор родительского класса, он принимает attributes. Кроме вызова super() в конструкторе дочернего класса, можно выполнить оставшуюся работу для этого класса. В примере выше присваивается имя тэга tagName. Благодаря этому в конструкторе дочернего класса выполняются оба конструктора: родительского класса и дочернего.

Использование наследников

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

Например, при работе с элементами HTML, объекты этих классов иногда порождаются самим программистом, а иногда системой. Например:

// Создаем сами
const element1 = new HTMLSelectElement();

// Где-то внутри создается объект HTMLSelectElement
const element2 = document.querySelector('select');

Можно ли подменить класс в примере с querySelector()? Зависит от реализации библиотеки по работе с HTML-элементами. В тех библиотеках, что нам известны, это сделать невозможно. Это значит, что единственный выход использовать собственный класс — это конвертировать вернувшийся объект в объект нужного нам класса. Стоит ли оно того? Почти наверняка, что нет.

const element = document.querySelector('select');
const convertedElement = new MyHTMLSelectElement(element);

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

---

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

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