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

Especificación Estado Comentarios
ECMAScript 2015 (6th Edition, ECMA-262)
La definición de 'extends' en esta especificación.
Standard Definición inicial.
ECMAScript Latest Draft (ECMA-262)
La definición de 'extends' en esta especificación.
Draft  

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

Etiquetas y colaboradores del documento

Colaboradores en esta página: miguelusque, PauPeinado
Última actualización por: miguelusque,