extends

Ключове слово extends використовується у оголошеннях класів або у виразах класів для створення дочірнього класу від іншого класу.

Синтаксис

class ChildClass extends ParentClass { ... }

Опис

Ключове слово extends може використовуватись для створення підкласів з користувацьких класів, як і з вбудованих об'єктів.

Значенням .prototype батьківського класу має бути Object або null.

Приклади

Використання extends

Перший приклад створює клас на ім'я Square (квадрат) з класу на ім'я Polygon (багатокутник). Даний приклад взятий з цього зразка (джерело).

class Square extends Polygon {
  constructor(length) {
    // Тут він викликає конструктор батьківського класу
    // та надає значення ширини й довжини багатокутника
    super(length, length);
    // Заувага: У похідному класі super() має викликатися до
    // використання 'this'. Інакше виникне помилка посилання.
    this.name = 'Square';
  }

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

Використання extends із вбудованими об'єктами

Цей приклад розширює вбудований об'єкт Date. Даний приклад взяти з цього зразка (джерело).

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.

class nullExtends extends null {
  constructor() {}
}

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

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

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

Специфікація Статус Коментар
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'extends' in that specification.
Standard Початкове визначення.
ECMAScript (ECMA-262)
The definition of 'extends' in that specification.
Living Standard

Сумісність з веб-переглядачами

BCD tables only load in the browser

Див. також