Crear clases y objetos en JavaScript te permite organizar tu código y construir entidades reutilizables, como los personajes de un videojuego. Aquí aprenderás a definir una clase con sus propiedades y a generar objetos a partir de ella, paso a paso, usando el ejemplo de los Mokepones.

¿Cómo se declara una clase en JavaScript?

Una clase funciona como el plano de construcción de tus objetos. Defines una sola vez su estructura y luego generas tantos objetos como necesites.

Para declararla, usa la palabra reservada class seguida del nombre. La regla más importante: el nombre de una clase siempre empieza con mayúscula, y eso la diferencia visualmente de las variables comunes [01:00].

javascript class Mokepon { constructor(nombre, foto, vida) { this.nombre = nombre this.foto = foto this.vida = vida } }

¿Para qué sirve el constructor dentro de una clase?

El constructor es una función especial que se ejecuta cada vez que creas un objeto nuevo. Dentro de él colocas las propiedades que tendrá cada instancia: nombre, foto, vida, o lo que tu objeto necesite [01:30].

Si mañana quieres extender tu juego, puedes sumar más propiedades aquí, como tipo de ataque o nivel, sin reescribir tu lógica desde cero.

¿Qué es una propiedad en una clase? Es una característica específica del objeto. En un Mokepon son nombre, foto y vida; en un carro podrían ser puertas, color o motor.

¿Qué hace la palabra reservada this en JavaScript?

this hace referencia a la clase misma, al objeto que se está construyendo en ese momento. Cuando escribes this.nombre = nombre, estás guardando internamente el valor que llega desde el constructor en una propiedad propia del objeto [02:45].

Es como decirle a JavaScript: el nombre de este Mokepon será igual al nombre que me pasaron al crearlo.

¿Cómo se crean objetos a partir de una clase?

Una vez tienes la clase lista, generar objetos es directo. Usa la palabra reservada new seguida del nombre de la clase y los valores que pide el constructor, en el mismo orden.

javascript let hipodoge = new Mokepon('Hipodoge', 'assets/mokepons_mokepon_hipodoge_attack.png', 5) let capipepo = new Mokepon('Capipepo', 'assets/mokepons_mokepon_capipepo_attack.png', 5) let ratigueya = new Mokepon('Ratigueya', 'assets/mokepons_mokepon_ratigueya_attack.png', 5)

Cada let es una instancia distinta de la misma clase. Tres objetos independientes con la misma estructura, pero con valores propios [04:30].

¿Qué significa la palabra new en JavaScript? Indica que estás creando un nuevo objeto a partir de una clase existente. Sin new, no se ejecuta el constructor ni se genera la instancia.

¿Cómo verificar que el objeto se creó correctamente?

Aquí entra console.log, una herramienta clave para depurar y revisar valores en el navegador. Te permite imprimir cualquier variable y ver qué contiene realmente.

javascript console.log(hipodoge)

Al refrescar el navegador verás un objeto tipo Mokepon con sus tres propiedades: nombre, foto y vida. Si despliegas la flecha, también aparece su prototype, que confirma que el tipo de elemento es un objeto [06:00].

¿Qué reglas debes seguir al crear clases y objetos?

Unas pocas convenciones evitan errores frecuentes y mantienen tu código legible:

• Los nombres de clases siempre inician con mayúscula (Mokepon, Carro, Usuario).
• Las propiedades dentro del constructor se asignan con this.propiedad = valor.
• Los valores que pasas al crear el objeto deben ir en el mismo orden que pide el constructor.
• Los strings van entre comillas; los números, sin comillas.
• Cada objeto creado con new es independiente, aunque compartan la misma clase.

Después de aplicar estas reglas, tu código gana estructura y se vuelve mucho más fácil de escalar.

¿Qué pasa cuando necesitas manejar varios objetos a la vez?

Ahora tienes tres Mokepones funcionando, pero imprimirlos uno por uno con console.log no escala. Si tu juego crece a diez o veinte personajes, necesitas una estructura que los agrupe.

Esa estructura se llama arreglo, y es la siguiente pieza del rompecabezas. Un arreglo te permite guardar varios objetos en una sola variable y recorrerlos cuando quieras mostrar tarjetas, calcular vida total o asignar ataques.

¿Ya intentaste crear tu propia clase con propiedades distintas? Cuéntame en los comentarios qué objeto modelaste y qué propiedades le pusiste.