Herencia y prototipos en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:15

Herencia y prototipos en JavaScript

Curso de Fundamentos de JavaScript

Clase 39 de 55

Clase 39 / 55

Recursos

En JavaScript, entender herencia y prototipos es clave para dominar la programación orientada a objetos. Cada clase o función constructora genera un prototipo que comparte propiedades y métodos con sus instancias, lo que te permite escribir código más limpio, reutilizable y organizado.

¿Qué son los prototipos en JavaScript y por qué importan?

JavaScript no funciona como otros lenguajes orientados a objetos tradicionales. Aquí, todo se mueve alrededor de objetos y prototipos. Cuando defines una clase o una función constructora, JavaScript automáticamente crea un prototype asociado a ella.

Ese prototipo es el lugar donde viven las propiedades y los métodos que se van a compartir entre todas las instancias que crees después. Piensa en el prototipo como un repositorio común al que todas las instancias pueden acceder sin necesidad de duplicar código.

¿Qué es un prototipo en JavaScript? Es un objeto que se genera automáticamente cuando defines una clase o función constructora, y contiene los métodos y propiedades que las instancias heredan.

¿Cómo funciona una clase constructora como molde?

Una clase constructora actúa como un molde. Defines una sola vez la estructura, y luego la usas para crear múltiples objetos con la misma forma pero datos distintos.

Imagina que armas una clase llamada Persona. Dentro del molde defines propiedades como nombre, edad, altura y nacionalidad, además de métodos como saludar. Cada vez que necesitas representar a alguien nuevo, creas una instancia a partir de ese molde.

Por ejemplo, si creas una instancia llamada José, le pasas estos datos:

Nombre: José.
Edad: 30 años.
Altura: 1,70.
Nacionalidad: colombiano.

Y aquí viene lo interesante: José no necesita tener su propia copia del método saludar. Ese método ya vive en el prototipo de la clase Persona, así que José simplemente lo hereda.

¿Qué es una instancia y cómo se relaciona con la clase padre?

Una instancia es un objeto concreto creado a partir de una clase. Mientras la clase es el molde abstracto, la instancia es el resultado real con datos específicos.

La clase principal, también llamada clase padre, contiene la lógica compartida. Las instancias que creas a partir de ella reciben automáticamente acceso a esa lógica gracias al prototipo. Por eso, cuando José ejecuta el método saludar, la respuesta puede ser: "Hola, mi nombre es José, ¿cómo te llamas tú?".

¿Para qué sirve la herencia en programación orientada a objetos? Sirve para que las instancias accedan a métodos y propiedades definidos en la clase padre sin tener que reescribirlos, lo que evita duplicación y facilita el mantenimiento.

¿Cómo se hereda un método desde la clase padre?

La herencia en JavaScript ocurre de forma automática gracias al prototipo. Cuando defines un método en la clase constructora, ese método queda disponible para cualquier instancia que crees después.

El flujo se ve así:

Defines la clase Persona con propiedades y el método saludar.
Creas una instancia, por ejemplo José, con sus datos personales.
Llamas al método saludar desde José, aunque nunca lo definiste dentro de esa instancia.
JavaScript busca el método en el prototipo de la clase padre y lo ejecuta con los datos de José.

No necesitas declarar el método dentro de cada instancia. Una vez que está en la clase padre, todas las instancias lo tienen disponible. Esa es la magia de la herencia prototípica.

¿Qué ventajas te da trabajar con clases y prototipos?

Usar clases y prototipos te da varios beneficios concretos al programar:

Reutilizas código sin repetirlo en cada objeto.
Mantienes una estructura clara entre molde e instancias.
Modificas un método en la clase padre y todas las instancias se actualizan.
Organizas mejor proyectos grandes con muchos objetos similares.

Entender esta relación entre clase, prototipo e instancia te abre la puerta a escribir JavaScript más profesional y a aprovechar al máximo la programación orientada a objetos. ¿Ya intentaste crear tu propia clase constructora? Cuéntame en los comentarios qué molde se te ocurre construir primero.

Andrés Soret Chacin

Hace 2 años

Programación orientada a objetos en JavaScript

JavaScript funciona con objetos y prototipos, y la programación orientada a objetos se basa en el concepto de herencia.
Entender cómo funcionan los prototipos y la herencia es crucial para trabajar con clases y funciones constructoras en JavaScript.

Clases y funciones constructoras

Una clase o función constructora actúa como un molde para crear objetos.
Estas estructuras definen propiedades y métodos que se utilizarán para crear instancias con información específica.

Prototipos en JavaScript

Las funciones constructoras generan automáticamente un prototipo.
El prototipo contiene todas las propiedades y métodos que se compartirán o heredarán en las instancias creadas a partir de la clase principal.

Ejemplo de clase y herencia

class Persona { constructor(nombre, edad, altura, nacionalidad) { this.nombre = nombre; this.edad = edad; this.altura = altura; this.nacionalidad = nacionalidad; }

saludar() { console.log(Hola, mi nombre es ${this.nombre}, ¿cómo te llamas tú?); } }

En este ejemplo, se define una clase Persona con un constructor y un método saludar.
El constructor recibe cuatro parámetros: nombre, edad, altura, y nacionalidad.

Crear instancias de una clase

Para crear una instancia de una clase, se utiliza la palabra reservada new.

const jose = new Persona('José', 30, 1.70, 'Colombiano'); jose.saludar();

En este ejemplo, se crea una instancia de la clase Persona llamada jose.
La instancia se inicializa con los valores 'José', 30, 1.70, y 'Colombiano' para las propiedades nombre, edad, altura, y nacionalidad.
El método saludar se llama en la instancia jose, imprimiendo el mensaje correspondiente.

Beneficios de la herencia y los prototipos

Los prototipos permiten que las instancias hereden propiedades y métodos definidos en la clase principal.
Esto facilita la reutilización de código y la creación de objetos con funcionalidades compartidas.

Próximos pasos

Practicar creando y utilizando clases y funciones constructoras en JavaScript para familiarizarse con la sintaxis y las funcionalidades.
Explorar la documentación oficial de JavaScript para profundizar en conceptos avanzados de prototipos y herencia.
Aplicar el uso de clases y herencia en proyectos reales para aprovechar las ventajas de la programación orientada a objetos.

Comentarios (24)24 comentarios

José Mora

Aloy Foxy

Calvin Rafael Bobadilla Fernandez

Dymon Zamora

Petter Joseph Chuquipiondo Robles

Yimi Alejandro Gaviria Escobar

Miguel Jonathan Madrigal González

Juliana Rios

Juan Miguel Jimenez

Hace 10 meses•editado

Fernando Emilio Díaz López

Hace un año

Daniel Vergel

Hace 3 meses

Eduardo Enrique Morales Martínez

David Elias Gatica Morales

Miguel Fernando Chanduvi Varas

Esaú Maximino

Matias Ezequiel Rivero

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 primitivos y complejos en JS

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

Cómo funciona switch en JavaScript

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

Cómo usar for of con arrays en JavaScript

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 lexical binding en JS

Scope chain y contextos 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 JS

Mutabilidad en arrays con push y pop

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

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

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

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

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

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

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

Promesas en JavaScript: estados y métodos

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

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

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

Actualizaciones y Nuevas Funciones en JavaScript

Herencia y prototipos en JavaScript