Función constructora y prototipo en JavaScript

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.