Introducción a prototipos

3.1 Concepto de prototipos

Los prototipos son uno de los conceptos clave en JavaScript, permitiendo a los objetos heredar propiedades y métodos de otros objetos. A diferencia de muchos otros lenguajes de programación, donde la herencia se realiza a través de clases, en JavaScript se basa en prototipos. Ahora vamos a ver qué son los prototipos, cómo funcionan y cómo se pueden utilizar.

Un prototipo en JavaScript es un objeto del cual otros objetos pueden heredar propiedades y métodos. Cada objeto en JavaScript tiene un enlace oculto a otro objeto, una propiedad oculta [[Prototype]], que apunta a su prototipo.

Este prototipo puede tener sus propios prototipos, formando una cadena de prototipos (prototype chain). Propiedades y métodos del objeto pueden ser heredados a lo largo de esta cadena. Esto permite a los objetos compartir funcionalidad y crear jerarquías de objetos.

La propiedad proto

En JavaScript, cada objeto tiene una propiedad __proto__ que apunta a su prototipo. Esta propiedad se utiliza para buscar propiedades y métodos si no se encuentran en el propio objeto.

En este ejemplo, el objeto child hereda el método greet() del objeto parent:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = {
        __proto__: parent
      };

      child.greet(); // Muestra: Hello from parent
    
  

3.2 Creación y uso de prototipos

1. Object.create()

El método Object.create() permite crear un nuevo objeto con el prototipo especificado.

Ejemplo:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.greet(); // Muestra: Hello from parent
    
  

2. Añadir propiedades y métodos al prototipo

Las propiedades y métodos pueden añadirse al prototipo para que estén disponibles para todos los objetos que lo heredan.

En este ejemplo, el método speak() se añade al prototipo animal y está disponible para el objeto dog:

    
      const animal = {
        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      };

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Muestra: Buddy makes a noise.
    
  

3. Cambiar el prototipo de un objeto

El prototipo de un objeto se puede cambiar usando el método Object.setPrototypeOf().

En este ejemplo, el prototipo del objeto duck se cambia de animal a bird:

    
      const animal = {
        speak() {
          console.log('Animal speaks');
        }
      };

      const bird = {
        fly() {
          console.log('Bird flies');
        }
      };

      const duck = {
        __proto__: animal,
        quack() {
          console.log('Duck quacks');
        }
      };

      Object.setPrototypeOf(duck, bird);
      duck.fly();   // Muestra: Bird flies
      duck.quack(); // Muestra: Duck quacks
    
  

3.3 Trabajar con prototipos

1. Verificar el prototipo de un objeto

El método Object.getPrototypeOf() permite obtener el prototipo de un objeto.

Ejemplo:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Muestra: true
    
  

2. Verificar la pertenencia de un objeto a un prototipo

El operador instanceof se usa para comprobar si un objeto es una instancia de un constructor específico o prototipo.

Ejemplo:

    
      function Person(name) {
        this.name = name;
      }

      const john = new Person('John');

      console.log(john instanceof Person); // Muestra: true
    
  

3. Recorrer las propiedades de un objeto y su prototipo

Para recorrer las propiedades de un objeto y su prototipo, se puede usar el bucle for...in, que enumera todas las propiedades enumerables.

Ejemplo:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      for (let key in child) {
        console.log(key);
      }

      // Muestra:
      // name
      // greet
    
  

Para recorrer solo las propiedades propias del objeto se usa el método Object.keys() o el bucle for...of con el método Object.entries().

Ejemplo:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      console.log(Object.keys(child)); // Muestra: ['name']

      for (const [key, value] of Object.entries(child)) {
        console.log(key, value);
      }

      // Muestra:
      // name Child