En diseño trabajas con componentes: un botón, una tarjeta o un carrusel se definen una vez y se usan muchas veces con distinto contenido. En programación, la herramienta equivalente son las clases: moldes para crear objetos que tienen datos y comportamiento. A esta forma de programar se le llama programación orientada a objetos (POO).

En la lección Arrays y objetos usaste objetos para guardar datos. Un objeto también puede tener métodos: funciones que le pertenecen y trabajan con sus datos a través de this.

const proyecto = {
  titulo: "Identidad Café Lento",
  categoria: "branding",
  anio: 2026,
  resumen() {
    return `${this.titulo} (${this.categoria}, ${this.anio})`;
  },
};

proyecto.resumen();   // "Identidad Café Lento (branding, 2026)"

this significa "este objeto". Si tienes veinte proyectos, escribir veinte objetos con el mismo método es repetir. Para eso están las clases.

class Proyecto {
  constructor(titulo, categoria, anio) {
    this.titulo = titulo;
    this.categoria = categoria;
    this.anio = anio;
  }

  resumen() {
    return `${this.titulo} (${this.categoria}, ${this.anio})`;
  }

  esReciente() {
    return this.anio >= 2025;
  }
}

const cafe = new Proyecto("Identidad Café Lento", "branding", 2026);
const festival = new Proyecto("Web del festival", "web", 2024);

cafe.resumen();        // "Identidad Café Lento (branding, 2026)"
festival.esReciente(); // false

• La clase se nombra en mayúscula (Proyecto) y en singular.
• constructor se ejecuta al crear cada objeto con new y guarda sus datos en this.
• Los métodos (resumen, esReciente) los comparten todos los objetos de la clase.
• Cada objeto creado es una instancia: cafe y festival son dos instancias de Proyecto.

Un método puede crear su propio HTML. Así cada objeto sabe dibujarse:

class Proyecto {
  constructor(titulo, categoria, imagen, alt) {
    this.titulo = titulo;
    this.categoria = categoria;
    this.imagen = imagen;
    this.alt = alt;
  }

  crearTarjeta() {
    const tarjeta = document.createElement("article");
    tarjeta.className = "tarjeta";
    tarjeta.dataset.categoria = this.categoria;

    const img = document.createElement("img");
    img.src = this.imagen;
    img.alt = this.alt;

    const titulo = document.createElement("h3");
    titulo.textContent = this.titulo;

    tarjeta.append(img, titulo);
    return tarjeta;
  }
}

const proyectos = [
  new Proyecto("Café Lento", "branding", "img/cafe.webp", "Taza con el logotipo"),
  new Proyecto("Festival Sur", "web", "img/festival.webp", "Portada de la web"),
];

const galeria = document.querySelector("#galeria");
proyectos.forEach((p) => galeria.append(p.crearTarjeta()));

Si mañana cambias el diseño de la tarjeta, lo cambias en un solo sitio.

Las clases brillan cuando un componente tiene estado (qué está activo) y eventos. Este componente convierte cualquier bloque de pestañas de la página en interactivo:

<div class="pestanas">
  <div role="tablist" aria-label="Servicios">
    <button type="button" role="tab" aria-selected="true" aria-controls="p-marca" id="t-marca">Marca</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="p-web" id="t-web">Web</button>
  </div>
  <section role="tabpanel" id="p-marca" aria-labelledby="t-marca">Logotipos y sistemas…</section>
  <section role="tabpanel" id="p-web" aria-labelledby="t-web" hidden>Webs a medida…</section>
</div>

class Pestanas {
  constructor(contenedor) {
    this.botones = contenedor.querySelectorAll('[role="tab"]');
    this.botones.forEach((boton) => {
      boton.addEventListener("click", () => this.activar(boton));
    });
  }

  activar(elegido) {
    this.botones.forEach((boton) => {
      const activo = boton === elegido;
      boton.setAttribute("aria-selected", String(activo));
      document.getElementById(boton.getAttribute("aria-controls")).hidden = !activo;
    });
  }
}

document.querySelectorAll(".pestanas").forEach((bloque) => new Pestanas(bloque));

• Cada bloque .pestanas de la página tiene su propia instancia y no interfiere con los demás.
• Dentro de las funciones flecha, this sigue siendo la instancia: por eso funciona this.activar(boton).
• Los atributos role y aria-* hacen que un lector de pantalla anuncie las pestañas. (El patrón completo de la WAI añade el movimiento con las flechas del teclado: tienes el enlace abajo).

Una clase puede heredar de otra con extends y añadir o cambiar lo que necesite:

class ProyectoDestacado extends Proyecto {
  crearTarjeta() {
    const tarjeta = super.crearTarjeta();   // lo que hace la clase madre…
    tarjeta.classList.add("destacado");     // …y algo más
    return tarjeta;
  }
}

Al principio no la necesitarás mucho, pero la verás en código de librerías y en los Web Components.

• Unos datos que solo se leen (una lista de proyectos): objetos sueltos en un array.
• Muchos elementos iguales con comportamiento o estado (tarjetas que se dibujan, componentes interactivos): una clase.
• Una sola función que hace una tarea: una función, sin más.

1. Crea la clase Color con nombre y hex, y un método muestra() que devuelva un div con ese color de fondo y el nombre como texto. Crea una paleta de cinco colores.
2. Añade a Proyecto un método coincide(categoria) que devuelva true si la categoría es "todos" o la del proyecto. Úsalo para filtrar.
3. Crea una clase Contador que reciba un botón y un elemento donde mostrar el número; si hay tres botones "Me gusta" en la página, cada uno lleva su cuenta.

• Olvidar new: Proyecto("…") da error.
• Olvidar this. dentro de la clase: titulo a secas no es el dato del objeto.
• Poner function delante de los métodos dentro de la clase (no se escribe).
• Usar function () { … } en un evento dentro de la clase y perder this: usa funciones flecha.
• Crear una clase para algo que es solo un dato o una función.