Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Clase 40 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué son los prototipos y la herencia en JavaScript?

Cuando hablamos de programación orientada a objetos en JavaScript, es crucial entender cómo funcionan los prototipos y la herencia. En este lenguaje, las funciones y las clases constructoras son las que generan la propiedad denominada prototipo. Este prototipo es esencial porque contiene los métodos y propiedades que construimos en las clases o funciones constructoras. De este modo, garantizamos que las instancias u otras clases que se extiendan de nuestra clase principal puedan acceder a esos métodos y propiedades.

¿Cómo se crean clases y funciones constructoras?

Las clases y funciones constructoras en JavaScript actúan como plantillas para construir objetos. Solo estas dos estructuras pueden generar un prototipo, lo cual no es posible en instancias. Para ejemplificar, vamos a ver cómo crear una clase constructora en JavaScript:

class Animal {
  constructor(nombre, tipo) {
    this.nombre = nombre;
    this.tipo = tipo;
  }

  emitirSonido() {
    console.log("El animal emite un sonido");
  }
}

En este ejemplo, nuestra clase Animal tiene un constructor que establece propiedades básicas como el nombre y el tipo del animal, así como un método para emitir un sonido.

¿Cómo se implementa la herencia en JavaScript?

JavaScript permite que una clase extienda otra, permitiendo heredar propiedades y métodos. Para ilustrarlo, crearemos una clase Perro que extiende de Animal:

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`);
  }
}

Aquí, Perro hereda de Animal. Gracias al uso de extends y super, Perro puede usar el constructor de Animal para inicializar las propiedades de nombre y tipo. Además, Perro tiene su propio método emitirSonido, que sobreescribe el de Animal, mostrando flexibilidad y personalización en la herencia.

¿Qué papel juega el this y el super?

El uso de this y super es crucial cuando trabajamos con herencia en JavaScript. this se refiere al contexto de la clase actual. Por otro lado, super permite acceder y llamar a funciones del objeto padre de una clase. Esto es especialmente importante para inicializar propiedades del padre cuando se usa herencia:

super(nombre, tipo);: Llama al constructor de Animal permitiendo que Perro inicialice nombre y tipo.
this.raza = raza;: Completa la inicialización de Perro con una propiedad adicional.

const perro1 = new Perro("Bobby", "perro", "Pug");
perro1.emitirSonido(); // Imprime: El perro ladra
perro1.correr(); // Imprime: Bobby corre alegremente

Con la instancia perro1, demostramos cómo Perro utiliza métodos heredados y propios, resaltando la eficiencia de la herencia.

¿Cómo funcionan los prototipos en la práctica?

Los prototipos en JavaScript funcionan de manera automática y son fundamentales para compartir métodos y propiedades entre instancias o en clase heredada. Lo podemos observar de la siguiente forma:

console.log(Animal.prototype); // Muestra métodos de la clase Animal
console.log(Perro.prototype);  // Incluye métodos de Perro y hereda los de Animal

Estos prototipos permiten modificar o agregar métodos de forma dinámica, compartiendo funciones entre objetos y asegurando una mayor eficiencia en el manejo de memoria.

Este entendimiento de prototipos y herencia nos permite crear código más eficiente y fácil de mantener, desarrollando estructuras de programación que maximizan la reusabilidad. ¡Sumérgete en la práctica y lleva estas ideas al siguiente nivel!

Sandra Rosa Arroyo Paredes

student•

Importante!

Las sub-clases heredan todos los métodos de la clase padre.
Para heredar las propiedades, nosotros debemos usar la keyword super(). Sin esta no podemos acceder al contexto this.
En caso no heredemos una propiedad (argumento), este asumirá un valor de undefined.

Al heredad propiedades con super(), debemos mantener el orden de los argumentos declarados y caso quisiéramos ignorar alguno, le asignamos undefined.

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"

Kyb3r Cipher

student•

Buena explicacion

Jafeth Jesús Sánchez Sánchez

student•

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();

Clase padre Estudiante: Esta clase tiene las propiedades generales (nombre, edad, grado) y un método saludar() que todos los estudiantes pueden usar.
Clase hija 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().
- Dentro del constructor de la clase hija, usamos 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()).
Instancia de 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.

Stiven Alvarez

student•

Ahora el curso gratis de programacion basica donde se hace el juego de los mokepones comienza a tener sentido.

Daniel Hernández

student•

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()

Ecsar García Sandoval

student•

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.

Juan Miguel Jimenez

student•

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.

Crea una clase padre llamada Empleado.
- Propiedades: nombre, salario.
- Método: obtenerDetalles() que imprima "Empleado: [nombre], Salario: $[salario]".
Crea una clase hija llamada Gerente que herede de Empleado.
- Propiedad adicional: departamento.
- Constructor: Usa super para nombre y salario, y asigna el departamento.
- Método: Sobreescribe obtenerDetalles() para que imprima "Gerente: [nombre], Dpto: [departamento]".
Crea una clase hija llamada Desarrollador que herede de Empleado.
- Propiedad adicional: lenguajePrincipal.
- Método: Agrega un método nuevo codear() que imprima "[nombre] está programando en [lenguajePrincipal]".

Juan Miguel Jimenez

student•

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);

LUIS FELIPE RESTREPO ARGÜELLO

student•

Adrián Felipe Bejarano Castaño

student•

Juan Miguel Jimenez

student•

Resumen de la Clase

Prototipos: Mecanismo base de JS para compartir métodos y propiedades.
Herencia (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.
Sobreescritura: Puedes volver a definir un método (como emitirSonido) en la clase hija para que se comporte diferente a la clase padre.

David Rangel

student•

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);

josorioc

student•

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.

zurisadai martinez

student•

Duda cual es la funcion de this en clases y objetos a que hace referencia?

Platzi

student•

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.

Andres Lopez

student•

Hola, es obligatorio implementar todos los metodos de la clase padre en la clase hijo?

Platzi

student•

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.

Andres Felipe Agudelo Galeano

student•

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??

Arturo Emiliano Sánchez Romero

student•

Heredas todas las propiedades, el ejemplo de la compañera Sandra Rosa Arroyo Paredes te puede guiar.

Arturo Emiliano Sánchez Romero

student•

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.

Edgar López Laynez

student•

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

Jonathan Garcia

student•

excelente clase. 👏

Cleidi Figueira

student•

super() es una palabra clave en JavaScript que se usa en clases para:

Llamar al constructor de la clase padre (en constructores)
Acceder a métodos y propiedades del prototipo padre (en métodos)

¿Por qué es importante super()?

Reutilización de código: Permite extender funcionalidad sin repetir código
Mantenimiento: Cambios en la clase padre se propagan correctamente
Jerarquía clara: Establece relaciones claras entre clases
Polimorfismo: Permite modificar comportamientos manteniendo acceso al original

Reglas importantes:

En constructores, super() debe llamarse ANTES de usar this
Solo se puede usar en clases que extienden otra clase
En métodos estáticos, super se refiere a métodos estáticos del padre

David Elias Gatica Morales

student•

Esta es basicamente una clase de herencia aplicada en JavaScript, les recomiendo complementar con clases de POO en general

Jhonathan Steven Calderon Sanchez

student•

En JavaScript, una clase actúa como un molde para crear instancias de objetos, mientras que el prototipo es un objeto que contiene las propiedades y métodos que pueden ser compartidos por todas las instancias creadas a partir de esa clase. Así, al utilizar el molde (la clase), se generan instancias con las funcionalidades definidas en el prototipo. Esta relación permite la herencia y la reutilización de código, que son conceptos clave en la programación orientada a objetos.

Jose Maldonado

student•

La palabra super en JavaScript se usa en el contexto de la herencia. Permite acceder a métodos y propiedades de la clase padre desde la clase hija. Al usar super(), llamas al constructor de la clase padre, permitiéndote inicializar el estado heredado.

Por ejemplo, en la clase Perro que extiende de Animal, al usar super(nombre, tipo), estás pasando los parámetros necesarios al constructor de Animal. Esto evita duplicar código y facilita la reutilización de funciones. Este concepto es esencial en la programación orientada a objetos.

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de Datos en JavaScript: Primitivos y Complejos

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Estructura y uso del condicional Switch en programación

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Iteración con for-of en JavaScript para arrays y strings

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow Functions y Enlace Léxico en JavaScript

Scope y Contextos de Ejecución en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

Métodos push y pop para modificar arrays en JavaScript

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Programación Orientada a Objetos en JavaScript: Conceptos y Práctica

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna

Programación Orientada a Objetos en JavaScript: Clases y Prototipos

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Implementación de la Función Sign-In y Validación de Usuario

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: Asincronía y Manejo de Estados

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE

Envío de Datos al Servidor con JavaScript y Fetch API

Eliminar Posts con JavaScript y Delegación de Eventos

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript