Comprender cómo JavaScript comparte métodos y propiedades entre clases es fundamental para escribir código reutilizable y organizado. El mecanismo de prototipos y la herencia permiten que una clase hija aproveche todo lo que ya existe en una clase padre, sin duplicar código. A continuación se desglosa cómo funcionan estos conceptos con un ejemplo práctico paso a paso.
¿Qué es la propiedad prototype y por qué solo existe en funciones y clases?
La propiedad prototype se genera automáticamente cada vez que creamos una clase constructora o una función constructora [01:00]. No es algo que programemos de forma explícita: JavaScript la crea por nosotros. Dentro de esa propiedad se almacenan los métodos y propiedades que definimos en la clase, y su propósito es compartirlos con cualquier instancia o clase que extienda de ella.
Un punto clave: las instancias no poseen la propiedad prototype. Solo las clases y funciones constructoras la tienen. Esto significa que el prototipo actúa como un puente entre el molde (la clase) y los objetos que se crean a partir de él.
¿Cómo se construye una clase padre y una clase hija con extends?
El ejemplo parte de una clase llamada Animal que funciona como clase padre [02:30]:
javascript
class Animal {
constructor(nombre, tipo) {
this.nombre = nombre;
this.tipo = tipo;
}
emitirSonido() {
console.log("El animal emite un sonido");
}
}
- nombre: identifica al animal.
- tipo: diferencia entre perro, gato u otro.
- emitirSonido: método genérico que imprime un mensaje básico.
Cuando necesitamos algo más específico, como un perro con su raza, creamos una clase hija que extiende de Animal [03:50]:
javascript
class Perro extends Animal {
constructor(nombre, tipo, raza) {
super(nombre, tipo);
this.raza = raza;
}
emitirSonido() {
console.log("El perro ladra");
}
correr() {
console.log(${this.nombre} corre alegremente);
}
}
¿Qué hace la palabra reservada super?
La palabra super llama al constructor de la clase base [05:10]. En el ejemplo, super(nombre, tipo) le dice a JavaScript: "Toma estas dos propiedades de la clase Animal y hazlas disponibles dentro de Perro". Sin super, no podríamos usar this.nombre ni this.tipo en la clase hija, y tendríamos que duplicar esas propiedades, perdiendo el beneficio de la herencia.
¿Qué significa sobrescribir un método?
Cuando Perro define su propio emitirSonido, está sobrescribiendo el método heredado de Animal [06:40]. Si creamos una instancia de Perro y llamamos a emitirSonido, obtenemos "El perro ladra" en lugar de "El animal emite un sonido". La versión de la clase hija tiene prioridad sobre la de la clase padre.
¿Cómo se verifica la herencia con prototype en la práctica?
Al crear una instancia y probar los métodos [07:50]:
javascript
const perroUno = new Perro("Bobby", "perro", "pug");
console.log(perroUno); // Perro { nombre: 'Bobby', tipo: 'perro', raza: 'pug' }
perroUno.correr(); // Bobby corre alegremente
perroUno.emitirSonido(); // El perro ladra
perroUno es una instancia, no una clase constructora, por lo que no tiene propiedad prototype propia.this.nombre funciona gracias a super, que conectó la propiedad con la clase Animal.
Para inspeccionar los prototipos directamente [09:20]:
javascript
console.log(Animal.prototype); // { emitirSonido: [Function] }
console.log(Perro.prototype); // { emitirSonido: [Function], correr: [Function] }
Animal.prototype muestra únicamente emitirSonido, mientras que Perro.prototype muestra tanto emitirSonido (sobrescrito) como correr. Además, al abrir el prototipo de Perro, se observa que hereda de Animal, confirmando la cadena de prototipos.
La cadena de prototipos es precisamente ese vínculo que JavaScript establece de forma automática entre clase hija y clase padre, permitiendo que los métodos y propiedades fluyan sin que tengamos que copiarlos manualmente.
Si quieres profundizar en cómo modificar el prototype para agregar métodos dinámicamente o cómo funciona la cadena completa hasta Object, comparte tus dudas en los comentarios.
