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

La palabra clave extends es usada en la declaración o expresión de clases, para crear una clase hija de otra.

Sintaxis

class ChildClass extends ParentClass { ... }

Descripción

La palabra clave extends se puede usar para crear una subclase a partir de clases personalizadas, así como sus objetos incorporados.

La propiedad .prototype de la nueva subclase debe ser un Object o null.

Ejemplos

Como usar `extends`

El primer ejemplo crea una clase con el nombre Square a partir de una clase llamada Polygon. Este ejemplo ha sido extraido del siguiente live demo (código fuente).

class Square extends Polygon {
  constructor(length) {
    // Aquí se invoca el constructor de la clase padre con longitud
    // proporcionada por el ancho y alto de Polygon
    super(length, length);
    // Nota: En las clases extendidas, se debe llamar a super()
    // antes de poder usar 'this'. El no hacerlo provocará un reference error.
    this.name = "Square";
  }

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

  set area(value) {
    this.area = value;
  }
}

Como usar `extends` con objetos incorporados

Este ejemplo extiende el objeto incorporado Date. Este ejemplo ha sido extraido del siguiente live demo (código fuente).

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()
    );
  }
}

Extendiendo de `null`

Extender de null es como hacerlo de una clase normal, excepto que el objeto prototype no hereda de Object.prototype.

class nullExtends extends null {
  constructor() {}
}

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

Especificaciones

Specification
ECMAScript Language Specification # sec-class-definitions

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Clases
super