Función constructora y prototipo en JavaScript

Contenido del curso

Clases Grabadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:47

Función constructora y prototipo en JavaScript

Curso de JavaScript Orientado a Objetos

Clase 3 de 15

Clase 3 / 15

Recursos

Optimiza tu código en JavaScript al migrar de una función factory a una función constructora con prototipos. Esta práctica mejora el rendimiento, ordena la lógica del app y evita duplicaciones en memoria cuando gestionas muchos hábitos. Trabajarás con Visual Studio Code, propiedades con this, el operador new, convención Pascal Case, y fechas en formato ISO usando new Date y su método toISOString.

¿Qué cambia al migrar de función factory a función constructora en JavaScript?

Migrar de una factory a una función constructora mantiene la misma estructura del objeto, pero cambia cómo se crea y comparte la lógica. En lugar de retornar manualmente el objeto, new construye y retorna la instancia automáticamente. Además, los métodos como rename se mueven al prototype para ser compartidos, evitando que cada instancia duplique la misma función.

Antes: factory que retorna un objeto con propiedades y método rename.
Problema: cada instancia copia rename en memoria.
Ahora: constructor Habit llamado con new que no usa return explícito.
Convención: nombre en Pascal Case para identificar constructores.
Asignación: uso de this para definir propiedades en la instancia.

¿Cómo impacta en la memoria y el rendimiento?

Un solo prototype compartido por todas las instancias.
Menos duplicación de métodos.
Mejor escalabilidad con cientos de hábitos.

¿Cómo implementar el constructor Habit con this y fecha en ISO?

La función constructora define propiedades con this y registra la creación con una fecha en formato ISO usando new Date().toISOString(). Se aprovechan variables globales existentes, como un contador para el id del hábito, y se actualiza la lógica de “agregar hábitos” para crear instancias con new.

function Habit(name, frequency) {
  this.id = habitCounter++; // incremento del contador global.
  this.name = name; // nombre del hábito recibido.
  this.frequency = frequency; // frecuencia recibida.
  this.create = new Date().toISOString(); // marca de tiempo en ISO.
}

Instanciación al agregar un hábito:

const habit = new Habit(name, frequency);

Fecha: toISOString devuelve una cadena estandarizada en ISO.
Integración: compatible con la lógica del DOM para mostrar alertas y hacer render de hábitos.
Claridad: sin return, porque new retorna la instancia creada.

¿Qué conviene documentar y revisar en el código?

Archivo principal: organización en app y variables globales usadas.
Funciones del DOM: mostrar errores, alertas y habilitar render.
Nombres: constructor en Pascal Case para legibilidad y convención.

¿Por qué mover rename al prototype optimiza el código?

Para no repetir el mismo método en cada objeto, se define una única función en el prototype del constructor. Así, todas las instancias acceden a rename compartiendo la misma referencia. Además, this dentro del método apunta a la instancia que lo invoca.

Habit.prototype.rename = function rename(newName) {
  this.name = newName;
};

Reutilización: un único rename para todas las instancias.
Mantenimiento: cambios en un lugar afectan a todas las instancias.
Semántica: método con nombre para facilitar el debugging y la lectura.

¿Qué actualizaciones realizar al migrar desde la factory?

Quitar return del constructor.
Usar new Habit(name, frequency) al crear hábitos.
Verificar que el servidor corre y que el flujo de “agregar hábitos” funciona.

¿Tienes dudas sobre el paso a prototipos o quieres compartir cómo integraste rename y el manejo de fechas? Comenta tu experiencia y los retos que encontraste al migrar tu código.

Resumen

¿Qué cambia al migrar de función factory a función constructora en JavaScript?

Antes: factory que retorna un objeto con propiedades y método rename.
Problema: cada instancia copia rename en memoria.
Ahora: constructor Habit llamado con new que no usa return explícito.
Convención: nombre en Pascal Case para identificar constructores.
Asignación: uso de this para definir propiedades en la instancia.

¿Cómo impacta en la memoria y el rendimiento?

Un solo prototype compartido por todas las instancias.
Menos duplicación de métodos.
Mejor escalabilidad con cientos de hábitos.

¿Cómo implementar el constructor Habit con this y fecha en ISO?

function Habit(name, frequency) {
  this.id = habitCounter++; // incremento del contador global.
  this.name = name; // nombre del hábito recibido.
  this.frequency = frequency; // frecuencia recibida.
  this.create = new Date().toISOString(); // marca de tiempo en ISO.
}

Instanciación al agregar un hábito:

const habit = new Habit(name, frequency);

Fecha: toISOString devuelve una cadena estandarizada en ISO.
Integración: compatible con la lógica del DOM para mostrar alertas y hacer render de hábitos.
Claridad: sin return, porque new retorna la instancia creada.

¿Qué conviene documentar y revisar en el código?

Archivo principal: organización en app y variables globales usadas.
Funciones del DOM: mostrar errores, alertas y habilitar render.
Nombres: constructor en Pascal Case para legibilidad y convención.

¿Por qué mover rename al prototype optimiza el código?

Habit.prototype.rename = function rename(newName) {
  this.name = newName;
};

Reutilización: un único rename para todas las instancias.
Mantenimiento: cambios en un lugar afectan a todas las instancias.
Semántica: método con nombre para facilitar el debugging y la lectura.

¿Qué actualizaciones realizar al migrar desde la factory?

Quitar return del constructor.
Usar new Habit(name, frequency) al crear hábitos.
Verificar que el servidor corre y que el flujo de “agregar hábitos” funciona.

¿Tienes dudas sobre el paso a prototipos o quieres compartir cómo integraste rename y el manejo de fechas? Comenta tu experiencia y los retos que encontraste al migrar tu código.

Clases Grabadas

POO en JavaScript: cómo pensar antes de programar

Configuración de proyecto JavaScript con Git y npm

Función constructora y prototipo en JavaScript

Objeto literal para manejar balance en JavaScript

Cómo funcionan los prototipos en JavaScript

Clases en JavaScript: constructor y métodos static

Campos privados y setters con validación en JavaScript

Composición en POO: delegar logs a LogTracker

Polimorfismo en JavaScript con duck typing

Herencia en TypeScript: extends y super

Abstracción en POO: ocultar complejidad

Polimorfismo aplicado a calculadoras de rachas

Factory methods para hábitos en JavaScript

Errores de dominio con códigos y validación robusta

POO en JavaScript: cuándo usar objetos y funciones

Función constructora y prototipo en JavaScript

Progreso del curso

Clases Grabadas

Recursos

Recursos