Métodos y herencia prototípica 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:0010:42

Métodos y herencia prototípica en JavaScript

Curso de Fundamentos de JavaScript

Clase 41 de 55

Clase 41 / 55

Recursos

Cuando trabajas con clases e instancias en JavaScript, tarde o temprano necesitarás agregar métodos nuevos que no existían en la clase original. Entender dónde y cómo se agregan esos métodos marca la diferencia entre un código que funciona y uno que falla silenciosamente. Aquí se explica el mecanismo de prototype, la cadena de prototipos y los errores más frecuentes al manipular instancias.

¿Cómo se agrega un método nuevo a una instancia?

Imaginemos que ya tenemos una clase Perro con sus métodos correr y emitirSonido, y creamos una instancia llamada perro1. Si durante el desarrollo detectamos que necesitamos un comportamiento extra, podríamos intentar algo como esto [0:06]:

javascript perro1.nuevoMetodo = function () { console.log("Este es un nuevo método"); };

Al inspeccionar perro1, el método aparece y funciona correctamente. Sin embargo, este método solo existe en esa instancia específica. Si creamos otra instancia de Perro, no tendrá acceso a nuevoMetodo porque nunca se agregó a la clase constructora.

¿Por qué la clase constructora no refleja el método?

Al revisar la clase Perro directamente, solo aparecen los métodos definidos originalmente: correr y emitirSonido. El método agregado vive únicamente en el objeto perro1 [1:10]. Esto ocurre porque agregar propiedades a una instancia no modifica la clase padre ni su prototype.

¿Qué es el prototype y por qué importa?

El prototype es un objeto especial que JavaScript crea automáticamente junto con cada clase o función constructora. Contiene los métodos que pueden ser compartidos y heredados por todas las instancias. Las instancias, en cambio, no poseen un prototype propio. Si ejecutamos perro1.prototype, el resultado es undefined [3:28]. Pero al consultar Perro.prototype, obtenemos el objeto con los métodos disponibles para heredar.

¿Cuál es la forma correcta de inyectar métodos al prototype?

Para que todas las instancias accedan a un método nuevo, debemos agregarlo al prototype de la clase constructora, no al de la instancia [2:15]:

javascript Perro.prototype.segundoMetodo = function () { console.log("Es otro nuevo método"); };

Después de esta línea, cualquier instancia —incluyendo las que ya existían— puede llamar a segundoMetodo. Al ejecutar perro1.segundoMetodo(), el mensaje se imprime correctamente [4:12].

Agregar métodos a una instancia los limita a esa instancia.
Agregar métodos al prototype de la clase los comparte con todas las instancias.
Las instancias no tienen prototype; solo las clases y funciones constructoras lo tienen.

¿Cómo funciona la cadena de prototipos?

Cuando llamamos perro1.segundoMetodo(), JavaScript sigue un proceso de búsqueda llamado cadena de prototipos (prototype chain) [4:40]:

Pregunta a la instancia perro1: "¿Tienes este método?" — responde que no.
Sube al prototype de la clase Perro: "¿Lo tienes tú?" — lo encuentra ahí.
Devuelve el método y lo ejecuta.

Si tampoco estuviera en Perro, la búsqueda continuaría hacia la clase de la que extiende. En este caso, Perro extiende de Animal, así que subiría a Animal.prototype. Si aún no lo encuentra, llegaría al objeto global Object, que es la raíz de todos los objetos en JavaScript. Más allá de Object solo hay null, y la búsqueda termina [6:55].

¿Cómo visualizar la cadena de prototipos completa?

Para recorrer toda la cadena se puede usar Object.getPrototypeOf() en un bucle [5:30]:

javascript let prototipoActual = Object.getPrototypeOf(perro1); while (prototipoActual) { console.log(prototipoActual); prototipoActual = Object.getPrototypeOf(prototipoActual); }

El resultado muestra tres niveles:

Primer nivel: el prototype de Perro, con sus métodos compartidos.
Segundo nivel: el prototype de Animal, la clase padre de la que extiende Perro.
Tercer nivel: Object, el objeto global del cual derivan todos los objetos en JavaScript.

Después de Object se obtiene null, indicando que no hay más eslabones en la cadena [7:40].

Esta interconexión entre objetos es lo que permite la herencia en JavaScript: las instancias acceden a métodos que no definen directamente, pero que heredan a través de la cadena de prototipos de sus clases padre. Comprender este mecanismo te ayuda a extender funcionalidad de forma segura y a evitar el error común de intentar modificar el prototype de una instancia. ¿Has tenido algún problema trabajando con prototipos? Comparte tu experiencia en los comentarios.

David Ramirez

Hace 2 años

¿Qué son los prototipos en JavaScript?

Los prototipos en JavaScript son como una receta que le dice a los objetos cómo deben comportarse y qué propiedades o métodos pueden usar.

JavaScript es un lenguaje basado en prototipos, lo que significa que los objetos pueden heredar propiedades y métodos de otros objetos. En lugar de usar clases (como en otros lenguajes), cada objeto tiene un prototipo del cual puede obtener características.

🔹 ¿Cómo funciona?

Cuando creas un objeto en JavaScript y le pides una propiedad o método, el motor de JavaScript busca primero dentro del objeto. Si no lo encuentra, revisa en su prototipo (y sigue subiendo en la cadena de prototipos hasta encontrarlo o hasta llegar a null).

🔹 Ejemplo práctico en un ambiente laboral

Imagina que trabajas en una empresa y necesitas hacer un sistema de empleados. Cada empleado tiene un nombre y un cargo. Además, todos los empleados pueden saludar, pero cada empleado puede tener diferentes datos.

En lugar de repetir la función saludar para cada empleado, usamos prototipos para definir el método una sola vez y que todos los empleados lo hereden.

✅ Código con prototipos

// 1. Creamos una función constructora para los empleados
function Empleado(nombre, cargo) {
    this.nombre = nombre;
    this.cargo = cargo;
}

// 2. Agregamos un método al prototipo de Empleado
Empleado.prototype.saludar = function() {
    console.log(`Hola, soy ${this.nombre} y trabajo como ${this.cargo}.`);
}

// 3. Creamos empleados usando la función constructora
const empleado1 = new Empleado("Ana", "Desarrolladora Frontend");
const empleado2 = new Empleado("Carlos", "Diseñador UX/UI");

// 4. Llamamos al método saludar (se hereda del prototipo)
empleado1.saludar(); // Salida: Hola, soy Ana y trabajo como Desarrolladora Frontend.
empleado2.saludar(); // Salida: Hola, soy Carlos y trabajo como Diseñador UX/UI.
```🔹 **¿Por qué es útil esto en el trabajo?**

* Evita repetir código innecesario.
* Permite ahorrar memoria porque los métodos no se duplican en cada objeto.
* Hace el código más limpio y fácil de mantener.

Este enfoque es muy común en proyectos grandes, especialmente en JavaScript antiguo antes de que existieran las clases (`class`). Sin embargo, sigue siendo importante entender los prototipos porque **las clases en JavaScript también funcionan internamente con prototipos**.

Comentarios (73)73 comentarios

Daniel Re

Marcela Roa

luis fernando troncoso montes

Paulo Jhoel Carrasco Limarino

Miguel Jonathan Madrigal González

Daniel Abraham Perez Larico

Camila Jhovanna Arato Cisneros

Diana estefany Rito Anguiano

Hace un año

Israel Churata

Juan Sifuentes

Joaquin Ignacio Pinto Reynolds

Oscar González López

Isaac Bonilla lopez

Allan Hernandez

Cesar Guevara Cabrera

Juan Miguel Jimenez

Hace 10 meses

Facundo Peralta

Gonzalo Sanchez

Daniel stevens Celorio sanabria

Arturo Emiliano Sánchez Romero

Luis Felipe Medina Álvarez

Enrique Gálvez

Alfonso Neil Jiménez Casallas

Julian Ortiz

Sandra Rosa Arroyo Paredes

Hector Maluy Fernandez

Jose Maldonado

Moises Hernandez

Jorge Ivan Martinez Guerra

Stiven Alvarez

Bryan Castano

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

Métodos y herencia prototípica en JavaScript