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) // 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 (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 |