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 constructor se ejecuta automáticamente cuando usas new Clase(...). Ahí asignas propiedades iniciales con this.

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 constructor se ejecuta automáticamente cuando usas new Clase(...). Ahí asignas propiedades iniciales con this.

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.

Dentro de un método, this apunta a la instancia que lo ejecuta. Por eso landing.toggleFavorito() 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