Orientación a objetos con JavaScript (ES6). Parte 2. Herencia

En el artículo anterior aprendimos los conceptos básicos sobre clases en JavaScript. En esta ocasión vamos a ver como aplicar la herencia sobre distintos objetos. Partiremos de un código que iremos desgranando poco a poco.

class Animal {
  #legs;

  constructor(legs) {
    console.log("Entering Animal constructor");
    this.#legs = legs;
    console.log("Exiting Animal constructor");
  }

  breathe() {
    return "I'm breathing";
  }
}

class Bird extends Animal {
  #canFly;

  constructor(legs, canFly) {
    console.log("Entering Birdconstructor");
    super(legs);
    this.#canFly = canFly;
    console.log("Exiting Bird constructor");
  }

  fly() {
    if (this.#canFly) {
      return "Look at me, I'm flying 😊";
    }

    return "I can't fly 😒";
  }
}

class Stork extends Bird {
  #species;

  constructor(species) {
    console.log("Entering Stork constructor");
    super(2, true);
    this.#species = species;
    console.log("Exiting Stork constructor");
  }

  whatsMySpecies() {
    return `I'm a ${this.#species} stork`;
  }

  fly() {
    console.log("I'm extending my flags");
    return super.fly();
  }
}

const whiteStork = new Stork("white");

// I'm breathing
console.log(whiteStork.breathe());


// I'm extending my flags
// Look at me, I'm flying 😊
console.log(whiteStork.fly());

// I'm a white stork
console.log(whiteStork.whatsMySpecies());

En esta jerarquía tenemos tres clases Animal, que tiene como hija Bird, que a su vez tiene como hija Stork. De la clase Animal no comentaremos mucho, pues ya vimos todo lo que contiene en el artículo anterior.

En la clase Bird nos detendremos en su definición y en su constructor:

class Bird extends Animal {
  ...
  constructor(legs, canFly) {
    super(legs);
    this.#canFly = canFly;
  }
}

En primer lugar vemos como poder establecer la relación de herencia con la clase padre con la palabra clave extends. Esto es similar a otros lenguajes como Java. Cabe destacar que de forma oficial sólo es posible heredar de esta forma de una clase. Se puede realizar herencia múltiple con otros métodos que veremos en otra ocasión...

Si nos vamos al constructor, aparece la palabra reservada super(). Esto indica que vamos a llamar al constructor de la clase base, la cual recibía un parámetro el cual le indicamos. De forma, que cuando el código entre al constructor de Bird, primero llamará al constructor de la clase padre, para posteriormente seguir con el resto del código de la clase hija.

Lo siguiente será ver otra cosilla relacionada con super, pero en la clase "nieta":

fly() {
  console.log("I'm extending my flags");
  return super.fly();
}

En esta ocasión podemos comprobar como si se indica un método de la clase base con super.nombreMétodo(), es posible llamar a éste.

Finalmente, indicar como sería el flujo de llamadas a constructores con lo que hemos implementado en este ejemplo. Habéis visto que hay varios console.log al entrar y salir de los constructores. Pues bien, al crear la instancia de la clase Stork veríamos esto por consola:

// Entering Stork constructor
// Entering Bird constructor
// Entering Animal constructor
// Exiting Animal constructor
// Exiting Bird constructor
// Exiting Stork constructor

Enlaces:

• Especificación en EcmaScript2015
• Parte 1 de esta serie. Clases
• Parte 3 de esta serie. Miembros estáticos