extends

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

Ключевое слово extends используется в объявлении класса или в выражениях класса для создания дочернего класса.

Синтаксис

class ChildClass extends ParentClass { ... }

Описание

Ключевое слово extends может быть использовано для создания дочернего класса для уже существующего класса или встроенного объекта.

Свойство . родительского класса или объекта должно быть Object или null.

Примеры

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

В первом примере создаётся дочерний класс с именем Square от класса с именем Polygon. Этот пример был взят из live demo (source).

js
class Square extends Polygon {
  constructor(length) {
    // Здесь вызывается конструктор родительского класса,
    // в который передаётся свойство length в качестве
    // аргументов, соответствующих полям width и height,
    // класса Polygon
    super(length, length);
    // Примечание:
    // В конструкторе класса, метод super() должен быть вызван
    // перед использованием this. В противном случае, будет
    // выброшена ошибка.
    this.name = "Square";
  }

  get area() {
    return this.height * this.width;
  }
}

Расширение встроенных объектов с помощью extends

Этот пример расширяет встроенный объект Date. Пример взят из live demo (source).

js
class myDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    return (
      this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear()
    );
  }
}

Расширение null

Расширение null работает как и с обычным классом, за исключением того, что прототип объекта не наследует Object..

js
class nullExtends extends null {
  constructor() {}
}

Object.getOf(nullExtends); // Function.
Object.getOf(nullExtends.); // null

new nullExtends(); //ReferenceError: this is not defined

Спецификации

Specification
ECMAScript® 2026 Language Specification
# sec-class-definitions

Совместимость с браузерами

Смотрите также