Fundamentos de Programación●●Intermedio

Composición y Patrones de Diseño

120 min

0 vistas

31 diciembre 2025

Comparar composición vs herencia y aplicar patrones Singleton, Factory y Observer.

Composición sobre herencia

Problema de herencia profunda: combinaciones complejas generan jerarquías difíciles de mantener.
Composición: combinar comportamientos mediante mixins u objetos para crear flexibilidad.
Regla práctica: usa herencia para "es un", composición para "tiene un".
Ventaja: puedes reutilizar piezas pequeñas y cambiar comportamientos sin tocar jerarquías.

javascript
1// Composición con funciones
2const conLog = (obj) => ({
3  ...obj,
4  log(m) {
5    console.log(`[LOG] ${m}`);
6  },
7});
8
9const conID = (obj) => ({
10  ...obj,
11  id: crypto.randomUUID(),
12});
13
14const usuario = conLog(conID({ nombre: "Ana" }));
15usuario.log(`Usuario ${usuario.id}`);

javascript
1// Mixins con clases
2const ConTimestamp = (Base) =>
3  class extends Base {
4    creadoEn = new Date();
5  };
6
7class Item {}
8class ItemConFecha extends ConTimestamp(Item) {}

Patrones de diseño

Singleton: una única instancia global.
Factory: crear objetos sin acoplarse a una clase concreta.
Observer: notificar cambios a múltiples observadores.
Cuándo usarlos: resuelven problemas repetitivos; evitar sobreusarlos.

Ejemplos de Código

3 ejemplos

Singleton básico

javascript

1class Config {
2  static instance;
3  constructor() {
4    if (Config.instance) return Config.instance;
5    Config.instance = this;
6    this.settings = { debug: false };
7  }
8}
9
10// Singleton alternativo con closure
11const ConfigSingleton = (() => {
12  let instance;
13  return () => {
14    if (!instance) instance = { debug: false };
15    return instance;
16  };
17})();

Factory de vehículos

javascript

1class VehiculoFactory {
2  static crear(tipo) {
3    switch (tipo) {
4      case "auto":
5        return new Auto();
6      case "moto":
7        return new Moto();
8      default:
9        throw new Error("Tipo inválido");
10    }
11  }
12}
13
14// Factory simple con mapa
15const factory = {
16  auto: () => new Auto(),
17  moto: () => new Moto(),
18};
19const vehiculo = factory["auto"]();

Observer básico

javascript

1class Observable {
2  constructor() {
3    this.obs = [];
4  }
5  suscribir(o) {
6    this.obs.push(o);
7  }
8  notificar(data) {
9    this.obs.forEach((o) => o.actualizar(data));
10  }
11}
12
13// Observer con funciones
14class EventBus {
15  #subs = new Set();
16  on(fn) {
17    this.#subs.add(fn);
18    return () => this.#subs.delete(fn);
19  }
20  emit(data) {
21    this.#subs.forEach((fn) => fn(data));
22  }
23}

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaIntermedio15 min

Práctica guiada - Composición

Práctica

Crear usuarios con mixins para login, edición y eliminación de datos, y medir impacto de cambios.

Desafío de Código

EjercicioIntermedio15 min

Ejercicios - Patrones

Ejercicios

(1) Implementar Singleton de logger, (2) Factory de roles, (3) Observer de eventos, (4) decidir entre herencia o composición en un caso real.

Taller Práctico

TallerIntermedio30 min

Proyecto de la semana

Proyecto

Descripción: Sistema de gestión completo con herencia, composición y patrones aplicados.
Detalle: incluir diagrama simple de clases y justificar decisiones de diseño.