extends

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

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Caracter铆stica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 45 (45) ? ? ?
Array subclassing 43.0 Sin soporte ? ? ?
Caracter铆stica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Sin soporte 45.0 (45) ? ? ? 42.0
Array subclassing Sin soporte Sin soporte ? ? ? 43.0

Ver tambi茅n