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 (en-US).
class nullExtends extends null {
constructor() {}
}
Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // nullEspecificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) La definición de 'extends' en esta especificación. |
Standard | Definición inicial. |
| ECMAScript (ECMA-262) La definición de 'extends' en esta especificación. |
Living Standard |
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! (en-US)
| 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 |

