Una de las características fundamentales en Javascript son los prototipos. Javascript es un lenguaje multiparadigma (podemos utilizar diferentes paradigmas de programación, como la  programación funcional, programación orientada a objetos…).

Una característica muy particular es que la orientación a objetos es muy diferente a otros lenguajes.

A partir de 2015 ya tenemos clases, pero no es más que un azúcar sintáctica (manera más sencilla) para poder hacer la programación basada en prototipos. Cuando creamos clases, estas clases las convierte el lenguaje Javascript en funciones prototípicas.

En POO hay 4 conceptos muy importantes que debemos entender:

  • Clases
  • Objetos
    • Atributos: característica o propiedad del objeto, son variables dentro de un objeto.
    • Métodos: acciones que un objeto puede realizar, son funciones dentro de un objeto.

Clase

Es un modelo a seguir, algo que nos sirve como esquema o modelo a seguir para de ahí basarnos y poder generar instancias.

Objeto

Es una instancia de esa clase, una copia de ese modelo.

Javascript lo que hace es transformar la clase que hemos creado a una función prototipal, ya que Javascript es un lenguaje basado en prototipos, y como se ha dicho anteriormente, las clases no son mas que azúcar sintáctico, una forma más sencilla de escribir, y que por detrás transforma dichas clases escritas en una función prototipal.

Prototipo

Es un mecanismo por el cual un objeto puede heredar de un objeto padre atributos (variables) y métodos (funciones).

La herencia hace una copia del prototipo en el cual está basado.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clases y Objetos</title>
  </head>

  <body>
    <h1>Clases y Objetos</h1>

    <script>
      // ESTO NO ES FUNCIONAL
      const persona= {
        nombre: "francisco",
        hablar() {
          console.log("Hola, soy Francisco");
        },
      };

      const persona2= {
        nombre: "Lola Bunny",
        hablar() {
          console.log("Hola, soy Federico");
        },
      };

      console.log(animal);
      console.log(animal2);

      // ESTO SI ES FUNCIONAL
      // CREAMOS UNA 'FUNCIÓN CONSTRUCTORA A PARTIR DE LA CUAL CREO INSTANCIAS'
      // SE ESCRIBE CON UpperCamelCase (INICIAL SIEMPRE EN MAYÚSCULA)
      // TANTO ATRIBUTOS COMO MÉTODOS TIENEN QUE COLGAR DEL OBJETO THIS

      // CREAMOS LA CLASE, QUE EN REALIDAD ES UNA FUNCIÓN PROTOTÍPICA
      function Persona(nombre, genero) {
        // ATRIBUTOS
        this.nombre = nombre;
        this.genero = genero;
      }

      // MÉTODOS FUERA DE LA FUNCIÓN CONSTRUCTURA
      Animal.prototype.hablar= function () {
        console.log("Hola, me llamo Francisco");
      };

      // GENERAMOS INSTANCIA
      const federico= new Persona("Federico", "Macho");
      const Catalina= new Persona("Catalina", "Hembra");
    </script>
  </body>
</html>

Para los métodos, lo mejor es escribirlos fuera de la función prototípica porque sino se está duplicando cada vez que creamos una instancia. Los sacamos de la función constructora y se los pegamos a los prototipos, no a las funciones constructoras como tal.

Utilizamos la palabra reservada prototype para crear los métodos fuera de la función prototípica.