CodeForge

JavaScript de Cero a Experto / POO en JS

Clases: fabricar objetos en serie

Teoría20 min20 XP

Tus objetos del módulo 5 se escriben uno por uno, a mano. Pero "Mi Bolsillo" real necesita CIENTOS de gastos con la misma forma y el mismo comportamiento — y escribirlos a mano no escala. La programación orientada a objetos (POO) empieza aquí: un MOLDE que fabrica objetos en serie. En JavaScript, ese molde se llama class.

El problema: objetos artesanales

Sin molde, cada gasto se fabrica a mano — y si quieres que además SEPA hacer cosas (formatearse, evaluarse), le copias las funciones a cada uno:

artesanal.js
const gasto1 = {
nombre: "Almuerzo",
valor: 18000,
esCaro() { return this.valor > 20000; },
};
const gasto2 = {
nombre: "Cine",
valor: 25000,
esCaro() { return this.valor > 20000; },   // copiada... otra vez
};

Dos gastos y ya hay código duplicado. Con cien, cualquier cambio en esCaro es una cacería por todo el proyecto — y cada copia ocupa su propia memoria. Necesitamos declarar la FORMA una sola vez.

El molde: class

Anatomía del molde: class Gasto declara el molde (por convención, con mayúscula inicial — así distingues moldes de objetos a simple vista); constructor es la función que corre al fabricar, donde this es la instancia naciendo y cada this.campo = valor le instala un dato propio; los demás métodos se escriben sin la palabra function (como los shorthand del módulo 5) y quedan disponibles en TODAS las instancias.

new: la palabra que acciona la máquina

new Gasto(...) hace cuatro cosas: crea un objeto vacío, lo conecta al molde, ejecuta el constructor con this apuntando a ese objeto, y te lo entrega. Olvidar el new no fabrica nada — y JavaScript, en un raro gesto de claridad, revienta con un error explícito en vez de fallar en silencio:

sin-new.js
// ✗ TypeError: Class constructor Gasto cannot be invoked without 'new'
const g = Gasto("Almuerzo", 18000, "comida");

Nota honesta de contexto: las clases NO reemplazan a los objetos literales del módulo 5. Para un dato suelto, una config, un parámetro — el literal sigue siendo el rey. La clase paga cuando fabricas MUCHOS objetos con la misma forma Y el mismo comportamiento: gastos, usuarios, productos, enemigos de un juego. Molde para lo repetido, literal para lo puntual.

Fabricas const a = new Gasto('Bus', 5800, 'transporte') y const b = new Gasto('Cine', 25000, 'ocio'), y luego haces a.valor = 6000. ¿Qué le pasa a b?

Mini-reto

Fabrica tu primer molde para "Mi Bolsillo": una clase Titular con nombre, ciudad y saldo en el constructor, y dos métodos: presentarse() (devuelve "Soy X, de Y" con template literal) y puedePagar(valor) (booleano contra el saldo). Crea dos titulares, comprueba que modificar el saldo de uno no toca al otro, y remata con un array de 3 gastos creado con new dentro de un map sobre datos crudos: datos.map((d) => new Gasto(d.nombre, d.valor, d.categoria)) — el molde y el módulo 4, unidos.

Qué sigue

Habrás notado que todo gira alrededor de this — y this es famoso por traicionar: funciona en el método, y de repente es undefined en un callback. En el módulo 5 te prometimos la explicación completa; la próxima lección la cumple: las cuatro reglas de this, de una vez y para siempre.