extends

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

Синтаксис

class ChildClass extends ParentClass { ... }

Описание

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

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

Примеры

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

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

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).

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.prototype (en-US).

class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null

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

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

Specification
ECMAScript Language Specification
# sec-class-definitions

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

BCD tables only load in the browser

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