Clases en JavaScript: constructor, métodos e instancias

Aprende a usar la sintaxis class para crear objetos con la misma estructura, inicializar propiedades con constructor y encapsular comportamiento en métodos.

Una clase es una forma ordenada de describir cómo se crean objetos del mismo tipo: qué datos tienen al nacer y qué acciones pueden ejecutar.

No sustituye a los objetos literales que viste en [Objetos en JavaScript](/curso/javascript/leccion/javascript-objetos-basico); los complementa cuando necesitas muchas instancias con la misma estructura.

En esta lección vas a usar <code>class</code>, <code>constructor</code>, <code>new</code> y métodos de instancia con un caso de proyectos.

La idea importante es simple: la clase define el molde; cada instancia tiene su propio estado.

  • Usa clases cuando necesitas crear varias entidades con los mismos datos y comportamientos.
  • Si solo tienes un objeto de configuración, un objeto literal suele bastar. Si vas a crear muchos proyectos, usuarios, tareas, productos o jugadores, una clase reduce repetición y deja claro el contrato.
  • La clase también te ayuda a mantener juntos los datos y los métodos que actúan sobre esos datos.
  • El constructor inicializa la instancia con los datos necesarios.
  • El método <code>constructor</code> se ejecuta automáticamente cuando usas <code>new Clase(...)</code>. Ahí asignas propiedades iniciales con <code>this</code>.

Cuándo una clase ayuda de verdad

Usa clases cuando necesitas crear varias entidades con los mismos datos y comportamientos.

Si solo tienes un objeto de configuración, un objeto literal suele bastar. Si vas a crear muchos proyectos, usuarios, tareas, productos o jugadores, una clase reduce repetición y deja claro el contrato.

La clase también te ayuda a mantener juntos los datos y los métodos que actúan sobre esos datos.

Constructor y `new`

El constructor inicializa la instancia con los datos necesarios.

El método <code>constructor</code> se ejecuta automáticamente cuando usas <code>new Clase(...)</code>. Ahí asignas propiedades iniciales con <code>this</code>.

Cada llamada a <code>new</code> devuelve un objeto independiente, aunque venga del mismo molde.

Métodos de instancia

Un método cambia o consulta el estado de una instancia concreta.

Dentro de un método, <code>this</code> apunta a la instancia que lo ejecuta. Por eso <code>landing.toggleFavorito()</code> cambia solo `landing`.

Este patrón evita duplicar funciones externas que necesitan recibir siempre el objeto como argumento.

JavaScript
15

Clases en JavaScript: constructor, métodos e instancias

Aprende a usar la sintaxis class para crear objetos con la misma estructura, inicializar propiedades con constructor y encapsular comportamiento en métodos.

Código del tema: class · constructor · new

📘 Teoría

Cuándo una clase ayuda de verdad

Usa clases cuando necesitas crear varias entidades con los mismos datos y comportamientos.

Si solo tienes un objeto de configuración, un objeto literal suele bastar. Si vas a crear muchos proyectos, usuarios, tareas, productos o jugadores, una clase reduce repetición y deja claro el contrato.

La clase también te ayuda a mantener juntos los datos y los métodos que actúan sobre esos datos.

1

Molde

2

Instancia

3

Método

Constructor y `new`

El constructor inicializa la instancia con los datos necesarios.

1

El método constructor se ejecuta automáticamente cuando usas new Clase(...). Ahí asignas propiedades iniciales con this.

2

Cada llamada a new devuelve un objeto independiente, aunque venga del mismo molde.

Métodos de instancia

Un método cambia o consulta el estado de una instancia concreta.

1

Dentro de un método, this apunta a la instancia que lo ejecuta. Por eso landing.toggleFavorito() cambia solo `landing`.

2

Este patrón evita duplicar funciones externas que necesitan recibir siempre el objeto como argumento.

🧪 Aprende probando

Ejemplo Ejemplo guiado: crear dos proyectos Define una clase y crea instancias con distintos valores iniciales.
Ejemplo Demo interactiva: proyectos creados con class Crea instancias, renderiza tarjetas y marca favoritos usando un método de la clase.

🏁 Retos

Reto Reto: clase Tarea Crea una clase con constructor y método para completar una tarea.

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com