extends

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since marzo de 2016.

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

js
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).

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

js
class nullExtends extends null {
  constructor() {}
}

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

Clases
super

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 5 ago 2023 by MDN contributors.

View this page on GitHub • Report a problem with this content

extends

In this article