Introducción

En JavaScript, los prototipos son una característica fundamental que permite la herencia y la reutilización de código. A diferencia de otros lenguajes de programación orientados a objetos que utilizan clases, JavaScript utiliza prototipos para implementar la herencia.

Objetivos de esta sección:

Comprender qué es un prototipo en JavaScript.
Aprender cómo funciona la herencia prototípica.
Implementar ejemplos prácticos de herencia utilizando prototipos.
Conocer los errores comunes y cómo evitarlos.

¿Qué es un Prototipo?

Un prototipo es un objeto del cual otros objetos heredan propiedades y métodos. Cada objeto en JavaScript tiene un prototipo, y este prototipo también puede tener un prototipo, formando una cadena conocida como "cadena de prototipos".

Ejemplo Básico de Prototipo

function Persona(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
}

Persona.prototype.saludar = function() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
};

const juan = new Persona('Juan', 30);
juan.saludar(); // Hola, mi nombre es Juan y tengo 30 años.

En este ejemplo:

Persona es una función constructora.
Persona.prototype.saludar es un método que todos los objetos creados con new Persona pueden usar.

Herencia Prototípica

La herencia prototípica permite que un objeto herede propiedades y métodos de otro objeto. Esto se logra asignando el prototipo de un objeto a otro objeto.

Ejemplo de Herencia Prototípica

function Estudiante(nombre, edad, curso) {
    Persona.call(this, nombre, edad);
    this.curso = curso;
}

// Establecer la herencia
Estudiante.prototype = Object.create(Persona.prototype);
Estudiante.prototype.constructor = Estudiante;

Estudiante.prototype.estudiar = function() {
    console.log(`${this.nombre} está estudiando ${this.curso}.`);
};

const maria = new Estudiante('Maria', 22, 'Matemáticas');
maria.saludar(); // Hola, mi nombre es Maria y tengo 22 años.
maria.estudiar(); // Maria está estudiando Matemáticas.

En este ejemplo:

Estudiante hereda de Persona usando Object.create(Persona.prototype).
Estudiante.prototype.constructor se reasigna a Estudiante para mantener la referencia correcta al constructor.

Ejercicio Práctico

Ejercicio 1: Crear una Jerarquía de Herencia

Crea una función constructora Animal con propiedades nombre y especie.
Añade un método hacerSonido al prototipo de Animal.
Crea una función constructora Perro que herede de Animal y añade una propiedad raza.
Añade un método ladrar al prototipo de Perro.

Solución

function Animal(nombre, especie) {
    this.nombre = nombre;
    this.especie = especie;
}

Animal.prototype.hacerSonido = function() {
    console.log(`${this.nombre} hace un sonido.`);
};

function Perro(nombre, especie, raza) {
    Animal.call(this, nombre, especie);
    this.raza = raza;
}

Perro.prototype = Object.create(Animal.prototype);
Perro.prototype.constructor = Perro;

Perro.prototype.ladrar = function() {
    console.log(`${this.nombre} está ladrando.`);
};

const rex = new Perro('Rex', 'Canino', 'Labrador');
rex.hacerSonido(); // Rex hace un sonido.
rex.ladrar(); // Rex está ladrando.

Errores Comunes y Consejos

Olvidar reasignar el constructor: Después de establecer la herencia con Object.create, es importante reasignar el constructor.
```
Perro.prototype.constructor = Perro;
```
No usar call para heredar propiedades: Al heredar propiedades del constructor padre, usa call para asegurarte de que las propiedades se asignen correctamente.
```
Animal.call(this, nombre, especie);
```
Modificar el prototipo directamente: Evita modificar el prototipo directamente después de crear instancias, ya que esto puede causar problemas de rendimiento y errores inesperados.

Conclusión

En esta sección, hemos aprendido sobre los prototipos y la herencia en JavaScript. Los prototipos permiten la reutilización de código y la creación de jerarquías de objetos. La herencia prototípica es una herramienta poderosa que, cuando se usa correctamente, puede hacer que tu código sea más modular y fácil de mantener.

Próximos Pasos

En la siguiente sección, exploraremos las clases en JavaScript y cómo proporcionan una sintaxis más limpia y moderna para trabajar con la herencia y los prototipos.

Prototipos y Herencia

Introducción

Objetivos de esta sección:

¿Qué es un Prototipo?

Ejemplo Básico de Prototipo

Herencia Prototípica

Ejemplo de Herencia Prototípica

Ejercicio Práctico

Ejercicio 1: Crear una Jerarquía de Herencia

Solución

Errores Comunes y Consejos

Conclusión

Próximos Pasos

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final