003. Clases y herencia

Desde el año 2015, el estándar ES6 nos ha dado lo que se conoce como azúcar sintáctico, lo que significa que nosotros en Javascript ya podemos escribir clases, sin embargo esas clases, aunque nosotros gramatical y sintácticamente escribamos dichas clases, Javascript, tras bambalinas lo va a compilar a prototipos.

Si venimos de otros lenguajes como PHP, Java… vamos a ver que es muy similar. Veamos un ejm.

Ejm

class Persona {
   constructor(nombre, apellido) {
      this.nombre = nombre;
      this.apellido = apellido;
   }
}

Las clases no reciben parámetros, para poder recibirlos a la hora que creamos un objeto de este tipo de clase, lo que hacemos es utilizar un método especial denominado constructor, que es el que va a recibir dichas propiedades. Dicho constructor se ejecuta en el momento de crear objetos (instancias) de este tipo.

Los métodos se crean como vimos en capítulos anteriores, con la siguiente  sintaxis.

Ejm

hablar(){
   console.log("Estoy hablando");
}

Los métodos sí pueden recibir parámetros en caso de que sea necesario.

Lo que hacen las clases es simplificar la escritura que vimos en el capítulo anterior cuando creábamos las funciones prototípicas. En el caso de las clases, lo métodos no es necesario sacarlos, Javascript realiza esta labor por nosotros tras bambalinas. Lo que tenemos es que invocar nuestras variables.

Ejm

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clases y herencia en Javascript</title>
  </head>

  <body>
    <h1>Clases y herencia en Javascript</h1>

    <script>
      class Persona {
        constructor(nombre, apellidos) {
          this.nombre = nombre;
          this.apellidos = apellidos;
        }

        hablar() {
          console.log("Soy una persona y estoy hablando");
        }
      }

      const persona = new Persona("Francisco", "Paredes");
      console.log(persona);
    </script>
  </body>
</html>

Herencia

Para crear clases que hereden de clases padre se utiliza la palabra reservada extends, como en otros lenguajes de programación. De la siguiente manera.

class Francisco extends Persona {
  constructor(nombre, apellidos, edad) {
     /* Con el método super() se manda llamar al constructor
     de la clase padre */
     super(nombre, apellidos);
     this.edad = edad;
  }

  hablar(){
    console.log("Soy Francisco y estoy hablando");
  }
}

Toda esta sintaxis no convierte a Javascript en un lenguaje orientado a objetos basado en clases, Javascript sigue siendo un lenguaje que la orientación a objetos la basa en prototipos. Lo único que nos dio el estándar a partir de ES6 es poder escribir de manera más sencilla las clases, es por ello que se le llama azúcar sintáctico, porque es una simplificación de cómo escribir prototipos.

Os dejamos un ejm completo.

Ejm

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clases y herencia en Javascript</title>
  </head>

  <body>
    <h1>Clases y herencia en Javascript</h1>

    <script>
      class Persona {
        constructor(nombre, apellidos) {
          this.nombre = nombre;
          this.apellidos = apellidos;
        }

        hablar() {
          console.log("Soy una persona y estoy hablando");
        }
      }

      class Francisco extends Persona {
        constructor(nombre, apellidos, edad) {
          super(nombre, apellidos);
          this.edad = edad;
        }

        hablar() {
          console.log("Soy Francisco y estoy hablando");
        }
      }

      const persona = new Persona("Nombre de persona", "Apellidos de persona");
      console.log(persona);
      persona.hablar();

      const francisco = new Francisco("Francisco", "Paredes", 51);
      console.log(francisco);
      francisco.hablar();
    </script>
  </body>
</html>
Scroll al inicio