Sandra Rosa Arroyo Paredes
Kyb3r Cipher
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"); } }
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.
Sandra Rosa Arroyo Paredes
Kyb3r Cipher
Jafeth Jesús Sánchez Sánchez
Stiven Alvarez
Kevin Yari Almiron
Kenneth Angulo L
Daniel Hernández
Ecsar García Sandoval
Daniel Vergel
Juan Miguel Jimenez
Juan Miguel Jimenez
LUIS FELIPE RESTREPO ARGÜELLO
Kenneth Angulo L
Kenneth Angulo L
Adrián Felipe Bejarano Castaño
Juan Miguel Jimenez
David Rangel
josorioc
zurisadai martinez
Platzi
Andres Lopez
Platzi
Andres Felipe Agudelo Galeano
Arturo Emiliano Sánchez Romero
Arturo Emiliano Sánchez Romero
Edgar López Laynez
Jonathan Garcia
Cleidi Figueira
Importante!
class Animal { constructor(nombre, edad, color = 'desconocido', tamaño = 'desconocido', peso = 0) { this.nombre = nombre; this.edad = edad; this.color = color; this.tamaño = tamaño; this.peso = peso; } mostrarInfo() { console.log(`Nombre: ${this.nombre}, Edad: ${this.edad}, Peso: ${this.peso}`); } } class Perro extends Animal { constructor(nombre, edad, peso, raza) { super(nombre, edad, undefined, undefined, peso); // O puedes omitir color y tamaño this.raza = raza; } } const miPerro = new Perro('Rex', 3, 25, 'Labrador'); miPerro.mostrarInfo(); // "Nombre: Rex, Edad: 3, Peso: 25"
Buena explicacion
La herencia en JavaScript es un mecanismo que permite a una clase "heredar" propiedades y métodos de otra clase. Esto facilita la reutilización de código y la organización de clases de forma más eficiente. Cuando una clase hereda de otra, la clase hija (o subclase) tiene acceso a las propiedades y métodos de la clase padre (o superclase).
La palabra clave super se utiliza para llamar al constructor de la clase padre desde el constructor de la clase hija. Es fundamental cuando necesitas inicializar las propiedades que se definen en la clase padre.
Solo existe en objetos o funciones constructoras
¿Cómo se utiliza?
La herencia se utiliza cuando tienes una clase con una estructura general y necesitas crear otras clases que sean una versión especializada de la clase base. Para ello, usas la palabra clave extends para crear la relación entre las clases, y dentro del constructor de la clase hija, llamas a super() para heredar las propiedades y métodos del constructor de la clase padre.
Ejemplo:
// Clase padre estudiante class estudiante { constructor (nombre, edad, grado){ this.nombre = nombre; this.edad = edad; this.grado = grado; } // Método que comparten todos los estudiantes saludar() { console.log(`Hola mi nombre es ${this.nombre} y tengo ${this.edad} años`); } } // Clase hija estudianteUniversitario que hereda de Estudiante class estudianteUniversitario extends estudiante{ constructor (nombre, edad, grado,materiaFavorita){ // Llamamos al constructor de la clase padre con 'super' super (nombre, edad, grado); this.materiaFavorita = materiaFavorita; // Nueva propiedad específica de estudianteUniversitario } mostrarClaseFavorita (){ console.log(`Mi clase favorita es ${this.materiaFavorita}`) } } // Crear una instancia de estudianteUniversitario const estudianteUni = new estudianteUniversitario ("Miguel", 23,"11°", "Matematicas"); // Usamos los métodos heredados y los específicos estudianteUni.saludar(); estudianteUni.mostrarClaseFavorita();
Estudiante: Esta clase tiene las propiedades generales (nombre, edad, grado) y un método saludar() que todos los estudiantes pueden usar.EstudianteUniversidad: Esta clase hereda de Estudiante usando extends, lo que significa que también tendrá las propiedades nombre, edad y grado, así como el método saludar().
super() para llamar al constructor de la clase padre y pasarle las propiedades que necesita. Luego, agregamos una propiedad nueva (claseFavorita) y definimos un método adicional (mostrarClaseFavorita()).EstudianteUniversidad: Creamos un nuevo objeto estudianteUni usando la clase hija, que hereda de Estudiante. Este objeto puede usar tanto los métodos heredados como los propios.Ahora el curso gratis de programacion basica donde se hace el juego de los mokepones comienza a tener sentido.
Ese es un curso "demo", el verdadero aprendizaje comienza cuando haces las rutas a las que solo puedes acceder de pago. (por cierto odie ese curso, recién ahora se me esta pasando jaja)
Uy !! Recuerdo ese curso. Claro alli pusimos en practica muchas cosas aprendidas antes.
Adaptaro para que funcionara en red fue un algo novedoso, fue retador.
Hola! Les comparto mi práctica de herencias.
class Person { constructor(name, age, numberPhone){ this.name = name this.age = age this.numberPhone = numberPhone } showInfo(){ console.log(`Hi, my name is ${this.name}, i´m ${this.age} and my number Phone is ${this.numberPhone} \n` ); } run(){ console.log(`${this.name} is running\n`); } } class Engineer extends Person{ constructor(name, age, degree, salary){ super(name, age); this.degree = degree this.salary = salary } showInfo(){ console.log(`Hi, my name is ${this.name}, i´m ${this.degree} and i earn $${this.salary} a mount \n` ); } work(){ console.log(`${this.name} is programing \n`); } } class Carpenter extends Person{ constructor(name, age, tool){ super(name, age) this.tool = tool } build(){ console.log(`Hi, i´m ${this.name} and i´m building a closet whit a ${this.tool} \n by the way i´m ${this.age} \n`); } } class Assistant extends Carpenter{ constructor(name, age, tool ){ super(name, age, tool) } help(){ console.log(`Hi, i´m ${this.name} and i have a ${this.tool} for work \n`); } } const persona1 = new Person('Jony', 28, 5527384951) const engineer1 = new Engineer('Lucas', 35, 'System Engineer', 1000) const carpenter1 = new Carpenter('Morgan', 40, 'chainsaw') const assistant1 = new Assistant('jordi', 18, 'saw') console.log(persona1); console.log(engineer1); console.log(carpenter1); console.log(assistant1); persona1.showInfo() persona1.run() engineer1.showInfo() engineer1.run() engineer1.work() carpenter1.showInfo() carpenter1.run() carpenter1.build() assistant1.showInfo() assistant1.run() assistant1.build() assistant1.help()
Mini Resumen: para heredar metodos se requiere que la clase a heredar utilice la palabra clave extends apuntando a la clase padre, y para heredar atributos(propiedades) se utiliza la palabra clave super(atr1, atr2), las propiedades no heredadas creadas en la clase hija requieren la palabra clave this. en ellas.
Reto de la clase: Para asegurar que dominas el tema, te propongo este ejercicio práctico basado en lo que leí de la clase:
Objetivo: Modelar un sistema de empleados usando herencia.
Empleado.
nombre, salario.obtenerDetalles() que imprima "Empleado: [nombre], Salario: $[salario]".Gerente que herede de Empleado.
departamento.super para nombre y salario, y asigna el departamento.obtenerDetalles() para que imprima "Gerente: [nombre], Dpto: [departamento]".Desarrollador que herede de Empleado.
lenguajePrincipal.codear() que imprima "[nombre] está programando en [lenguajePrincipal]".class Empleado { constructor(nombre, salario) { this.nombre = nombre; this.salario = salario; } obtenerDetalles() { console.log(`Empleado: ${this.nombre}, Salario: $${this.salario}`); } } class Gerente extends Empleado { constructor(nombre, salario, departamento) { super(nombre, salario); this.departamento = departamento; } obtenerDetalles() { console.log(`Gerente: ${this.nombre}, Departamento: ${this.departamento}`); } } class Desarrollador extends Empleado { constructor(nombre, salario, lenguajPrincipal) { super(nombre, salario); this.lenguajPrincipal = lenguajPrincipal; } obtenerDetalles() { console.log(`${this.nombre} está programando en ${this.lenguajPrincipal}`); } } const Pedro = new Gerente("Pedro", 5000, "Ventas"); const Ana = new Desarrollador("Ana", 4000, "JavaScript"); const Suleida = new Empleado("Suleida", 3000);
Tengo por aqui apuntes de alguna otra clase:
(metodos = comportamientos)
¿Es posible heredar de múltiples clases?
En JavaScript, no es posible heredar de múltiples clases directamente usando extends. El lenguaje está diseñado con un modelo de herencia simple, lo que significa que una clase hija solo puede tener un único "padre" directo. Esto se hizo para evitar el famoso "problema del diamante", donde el código se confunde si dos padres tienen métodos con el mismo nombre. Sin embargo, si necesitas combinar comportamientos de múltiples fuentes, la mejor forma de hacerlo es utilizando Mixins. Un mixin es una técnica donde creas un objeto con los métodos que necesitas y luego usas Object.assign() para copiar esas funcionalidades directamente en el prototipo de tu clase. De esta manera, puedes componer objetos con múltiples habilidades sin romper las reglas de la cadena de prototipos.
Resumen de la Clase
extends): Permite crear una clase nueva (ej. Perro) a partir de una existente (ej. Animal), heredando su comportamiento.super(): Es una función especial que se llama dentro del constructor de la clase hija para ejecutar el constructor de la clase padre. Esto asegura que las propiedades base (como nombre o tipo) se inicialicen correctamente antes de añadir las nuevas.emitirSonido) en la clase hija para que se comporte diferente a la clase padre.Por si gustan saber cómo se haría con TS(Typescript):
class Animal { nombre: string; tipo: string; constructor(nombre: string, tipo: string) { this.nombre = nombre; this.tipo = tipo; } emitirSonido(): void { console.log(`${this.nombre} emite un sonido`); } } class Perro extends Animal { raza: string; constructor(nombre: string, tipo: string, raza: string) { super(nombre, tipo); this.raza = raza; } emitirSonido(): void { console.log('El perro ladra'); } correr(): void { console.log(`${this.nombre} corre alegremente`); } } const perroUno = new Perro('Chimuelo', 'Perro', 'Husky'); console.log(perroUno); perroUno.correr(); perroUno.emitirSonido(); console.log(Animal.prototype); console.log(Perro.prototype);
Sí, se pueden reutilizar clases en JavaScript almacenándolas en archivos separados. Para hacer esto, debes exportar la clase desde el archivo donde está definida utilizando export, y luego importarla en otro archivo utilizando import.
Por ejemplo, si tienes una clase Animal.js, puedes exportarla así:
// Animal.js export class Animal { constructor(nombre, tipo) { this.nombre = nombre; this.tipo = tipo; } }
Y luego importarla en otro archivo:
// main.js import { Animal } from './Animal.js'; const perro = new Animal('Bobby', 'Perro');
Esto permite mantener tu código modular y organizado, facilitando la reutilización de clases en diferentes partes de tu proyecto.
Duda cual es la funcion de this en clases y objetos a que hace referencia?
La palabra this hace referencia al objeto o clase que se está construyendo, permitiendo acceder a los parámetros del constructor para que las instancias tengan propiedades del objeto.
Hola, es obligatorio implementar todos los metodos de la clase padre en la clase hijo?
No es obligatorio implementar todos los métodos de la clase padre en la clase hijo, se pueden heredar gracias a la cadena de prototipos.
Pero entonces cuando hago el Extend de la clase y utilizo super(), ahi voy a heredad solo las propiedades que incluya en super, asi la clase padre tenga mas propiedades??
Heredas todas las propiedades, el ejemplo de la compañera Sandra Rosa Arroyo Paredes te puede guiar.
Por si las dudas, pongo un ejemplo:
class Animal{ constructor(nombre, tipo, color, altura){ this.nombre = nombre this.tipo = tipo this.color = color this.altura = altura } emitirSonido(){ console.log("El animal emite un sonido") } esconderse(){ console.log("Se escondio") } soyTanAlto(){ console.log(`Mi altura es: ${this.altura}`) } } class Perro extends Animal{ constructor(nombre, tipo, altura, raza){ // Llama al constructor de la clase animal, // sin esta no podemos acceder al contexto this. super(nombre,tipo,undefined,altura) this.raza = raza } emitirSonido(){ // Sobre escribimos el método console.log("El perro ladra") } correr(){ console.log(`${this.nombre} corre alegremente`) } } let perro1 = new Perro("Bobby", "Perro", 10,"Pug") console.log(perro1) perro1.emitirSonido() perro1.correr() perro1.esconderse() // Método herredado perro1.soyTanAlto() // Método herredado /* Salida del objeto perro1 Perro { nombre: 'Bobby', tipo: 'Perro', color: undefined, altura: 10, raza: 'Pug' } */ ```Al final se ve que el objeto si heredo todas las variables.
Lo que hace realmente Diego al hacer super() es llamar al constructor de la clase padre de Animal, y eso hace que se inicialicen las propiedades de esta clase padre
excelente clase. 👏
super() es una palabra clave en JavaScript que se usa en clases para:
¿Por qué es importante super()?
Reglas importantes:
super() debe llamarse ANTES de usar thissuper se refiere a métodos estáticos del padre