Explicar la herencia de prototipos en JavaScript

En este artículo, intentaremos comprender los hechos que se requieren para comprender de manera efectiva qué significa exactamente la herencia de prototipos en JavaScript o qué implica realmente con la ayuda de varios ejemplos de enfoques.

Comprendamos los conceptos básicos detrás de la herencia de prototipos en JavaScript.

Herencia de prototipos en JavaScript: las siguientes viñetas intentarán analizar los conceptos básicos detrás de la herencia de prototipos en JavaScript .

• Bajo el fenómeno de la herencia clásica, creamos una nueva clase que en realidad extiende o reutiliza las propiedades o funciones, o métodos de otra clase que son usados ​​por varios lenguajes de programación (como C, C++, Java, etc.)
• JavaScript no usa la herencia clásica, sino que usa el fenómeno llamado Herencia de prototipos.
• En la herencia de prototipos, un objeto utiliza las propiedades o métodos de otro objeto a través del vínculo prototipo.
• Todos los objetos JavaScript heredan propiedades y métodos de un prototipo (como los objetos Date heredan propiedades de Date.prototype, etc.).

Seguir la representación pictórica, que contiene algunos valores de muestra, nos ayudará a comprender la herencia de prototipos de una manera mucho mejor y efectiva.

• En la representación pictórica anterior, hemos tomado un ejemplo para ilustrar la herencia del prototipo entre un conejo y otro objeto prototipo creado que es un animal.
• Estableceremos el objeto prototipo del conejo como un objeto prototipo animal en el que almacenaremos todos los valores de conejo con el propósito de que, si faltan las propiedades del conejo, JavaScript lo tomará automáticamente del objeto prototipo animal.

Ahora que ha entendido una breve descripción detallada de la herencia de prototipos, veamos y entendamos la herencia de prototipos con varios enfoques siguientes:

Enfoque 1:

• En este enfoque usaremos __proto__ , que es el nombre especial para el prototipo interno y oculto llamado [[Prototype]] .
• Almacenaremos todas las propiedades del conejo en el objeto prototipo animal y, a partir de entonces, podremos acceder a él cuando sea necesario.
• Este __proto__ es un poco antiguo y un enfoque obsoleto que existe por algunas razones históricas asociadas con JavaScript.

Ejemplo: 

<script>
    let animal = {
        animalEats: true,
    };
  
    let rabbit = {
        rabbitJumps: true,
    };
  
    // Sets rabbit.[[Prototype]] = animal
    rabbit.__proto__ = animal;
    console.log(rabbit.animalEats);
    console.log(rabbit.rabbitJumps);
</script>

Producción:

true
true

Enfoque 2: 

• En este enfoque, utilizaremos los nuevos métodos de JavaScript para implementar la herencia de prototipos de JavaScript.
• Aquí usaremos el método Object.setPrototypeOf() que toma dos parámetros, el primero es el objeto que debe tener su conjunto de prototipos y el segundo es el nuevo prototipo del objeto.
• Después de eso, hemos declarado dos objetos y usando esos dos objetos, estableceremos uno de los objetos como objeto prototipo para otro objeto.

<script>
    let rabbit = {
        rabbitJumps: true,
    };
    let animal = {
        animalEats: true,
    };
    Object.setPrototypeOf(rabbit, animal);
    console.log(rabbit.animalEats);
    console.log(rabbit.rabbitJumps);
</script>

Producción:

true
true