¿Cómo crear una clase en JavaScript?

En esta guía, aprenderás a utilizar esta potente estructura de ES6 para crear moldes de objetos reutilizables, optimizando tu lógica y facilitando el mantenimiento. Prepárate para descubrir cómo el encapsulamiento y la herencia pueden llevar tus habilidades en JavaScript al siguiente nivel.

como declara clases en javascript

Índice

1. Sintaxis para declaración básica de una clase

La forma básica de declarar una clase en JavaScript la vamos a explicar en dos partes.

PRIMERA PARTE donde se utiliza la palabra clave class, seguida del nombre de la clase y un bloque {} donde se definen sus propiedades y métodos.

SEGUNDA PARTE donde se crear un objeto (usando el operador new) a partir de dicha clase.

1.1. Primera parte: Sintaxis general para la clase.

// 1. Nombre de la clase
class NombreClase {
  // 2. Bloque de la clase 
  constructor(parametros) { 
    // 👆 3. El método constructor, inicialización de propiedades
  }  

  // 4. Métodos de la clase
  metodo() {
    // comportamiento de la clase
  }
}Lenguaje del código: JavaScript (javascript)

Explicación de cada parte:

  1. class NombreClase: (La clase funciona como un molde o plantilla para crear objetos).
    • class indica que estamos definiendo una clase.
    • NombreClase es el nombre de la clase.
    • Por convención se escribe en PascalCase (primera letra en mayúscula).
  2. Bloque de la clase { }
    • Dentro de las llaves se definen:
      • el constructor
      • los métodos
  3. El método constructor. (El constructor es un método especial que se ejecuta automáticamente cuando se crea una instancia new de la clase).
    • En este ejemplo:
      • nombre es un parámetro
      • this.nombre crea una propiedad en el objeto
      • this representa la instancia que se está creando.
  4. Métodos de la clase. (Los métodos definen el comportamiento de los objetos creados a partir de la clase.)
    • Aquí el método:
      • usa this.nombre
      • imprime un saludo en la consola.

Un ejemplo completo de esta sintaxis seriia:

class Persona {  constructor(nombre) {
    this.nombre = nombre;
  }  

saludar() {
    console.log("Hola soy " + this.nombre);
  }}Lenguaje del código: JavaScript (javascript)

1.2. Segunda parte: Crear un objeto a partir de la clase

Para usar la clase anterior se crea una instancia con new.

const persona1 = new Persona("Juan");persona1.saludar();Lenguaje del código: JavaScript (javascript)

Qué ocurre aquí

  1. new Persona("Juan") crea un nuevo objeto.
  2. Se ejecuta el constructor.
  3. this.nombre recibe el valor "Juan".
  4. El objeto puede usar el método saludar().

RESULTADO EN CONSOLA:

Hola soy Juan

🌿IDEA CLAVE:

Una clase en JavaScript se compone principalmente de:

  1. Nombre de la clase
  2. Constructor
  3. Métodos

Y se utiliza como plantilla para crear objetos organizando propiedades y comportamientos en un mismo lugar.

1.3. Ejemplo usando sintaxis:

class NombreDeLaClase {
  // Constructor: El motor de arranque
  constructor(parametro1, parametro2) {
    this.propiedad1 = parametro1;
    this.propiedad2 = parametro2;
  }

  // Método: Una acción o comportamiento
  nombreDelMetodo() {
    return `Resultado: ${this.propiedad1}`;
  }
}

// Crear un objeto real (instancia)
const miObjeto = new NombreDeLaClase("Valor A", "Valor B");

// Llamamos a la funcion
console.log(miObjeto.nombreDelMetodo());

// RESULTADO: Resultado: Valor ALenguaje del código: JavaScript (javascript)

Explicación:

Para que lo veas más claro, analicemos qué hace cada palabra clave en este «molde»:

  1. class:
    • Es la palabra reservada que le dice a JavaScript: «Atención, voy a definir una plantilla». Por convención, el nombre de la clase siempre empieza con Mayúscula (PascalCase).
  2. constructor():
    • Es un método especial que se ejecuta una sola vez, justo en el momento en que creas el objeto con new. Su función es recibir los datos iniciales y guardarlos.
  3. this:
    • Es quizás lo más importante. Se refiere al objeto específico que se está creando. Piensa en this como si el objeto dijera: «Mi propio nombre es…» o «Mi propia edad es…». Ayuda a diferenciar las propiedades del objeto de las variables locales.
  4. Métodos:
    • Son funciones que viven dentro de la clase. No necesitan la palabra function. Definen lo que los objetos creados con esa clase «saben hacer».
  5. new:
    • Es el operador que «invoca» al constructor. Sin new, la clase es solo un dibujo; con new, es un objeto que ocupa espacio en la memoria.
  6. Llamamos a la función:
    • Al crear el objeto con new, pasamos "Valor A" como primer argumento. El constructor lo recibe y, usando this, lo guarda de forma permanente en la propiedad del objeto. Cuando llamamos al método, este simplemente recupera ese valor guardado y lo retorna.

2. Declaración de clase VS expresión de clase.

2.1. Declaración de clase (Class declaration)

Una class declaration es cuando declaramos la clase directamente con un nombre.

2.1.1. Ejemplo

class Animal {
  hablar() {
    console.log("El animal hace un sonido");
  }
}Lenguaje del código: JavaScript (javascript)

Uso:

const perro = new Animal();
perro.hablar();Lenguaje del código: JavaScript (javascript)

Características

  1. Tiene nombre obligatorio.
  2. Se declara de forma independiente.
  3. Se usa como estructura principal del programa.

2.2. Expresión de clase (Class expression)

Una class expression es cuando la clase se asigna a una variable.

2.2.1. Ejemplo

const Persona = class {
  saludar() {
    console.log("Hola");
  }
};Lenguaje del código: JavaScript (javascript)

Uso:

const p = new Persona();
p.saludar();Lenguaje del código: JavaScript (javascript)

Aquí ocurre lo siguiente:

  1. Se crea una clase.
  2. Esa clase se guarda dentro de la variable Persona.
  3. Luego usamos esa variable para crear instancias.

2.2.2. Class expression con nombre interno

También puede tener un nombre interno:

const Usuario = class UsuarioInterno {
  mostrarNombre() {
    console.log("Usuario activo");
  }
};Lenguaje del código: JavaScript (javascript)

Pero ese nombre solo existe dentro de la clase.

2.3. Diferencias entre Class Declaration y Class Expression

Característica Class Declaration Class Expression
Forma class Persona {} const Persona = class {}
Nombre Obligatorio Opcional
Uso típico Definir estructuras principales Clases dinámicas o temporales
Hoisting No se puede usar antes de declararla Igual comportamiento

3. El método constructor y la instancia new.

3.1. ¿Qué es el método constructor?

Si bien ya lo vimos en los ejemplos del punto anterior, aquí dejo una definición: constructor es un método especial dentro de una clase que se ejecuta automáticamente cuando se crea un objeto a partir de esa clase.

Su función principal es:

  • Inicializar las propiedades del objeto
  • Recibir valores al crear la instancia
  • Configurar el estado inicial del objeto

En otras palabras, el constructor sirve para preparar el objeto cuando nace.

3.2. ¿Qué es una instancia creada con new?

Una instancia es un objeto creado a partir de una clase.

La palabra clave new le dice a JavaScript que:

  1. Cree un nuevo objeto.
  2. Ejecute el constructor de la clase.
  3. Asigne las propiedades definidas en el constructor.
  4. Devuelva ese objeto.

Es decir:

Clase → plantilla
Instancia → objeto creado a partir de esa plantilla

3.3. Ejemplo:

class Persona {

  // CONSTRUCTOR: método especial que se ejecuta cuando creamos un objeto con "new"
  constructor(nombre, edad) {

      // "this" representa el objeto que se está creando, aquí estamos creando una propiedad llamada "nombre"
    this.nombre = nombre;

      // aquí estamos creando otra propiedad llamada "edad"
    this.edad = edad;
  }

    // método de la clase que podrán usar todas las instancias
  saludar() {

      // usamos las propiedades del objeto mediante "this"
    console.log("Hola, soy " + this.nombre + " y tengo " + this.edad + " años");

  }
}

// Creamos una instancia con new
  // usamos "new" para crear un objeto basado en la clase Persona
const persona1 = new Persona("Juan", 30);

  // llamamos al método del objeto creado
persona1.saludar();Lenguaje del código: JavaScript (javascript)

Resultado en consola:

Hola, soy Juan y tengo 30 años

¿Qué ocurre internamente cuando usamos new?

Cuando ejecutamos:

const persona1 = new Persona("Juan", 30);Lenguaje del código: JavaScript (javascript)

🎯JavaScript hace internamente algo parecido a esto (explicado de forma conceptual):

// 1️⃣ JavaScript crea un objeto vacío
let objeto = {};

// 2️⃣ conecta el objeto con el prototipo de la clase
  // esto permite que el objeto use los métodos de la clase
objeto.__proto__ = Persona.prototype;

// 3️⃣ ejecuta el constructor de la clase
  // y hace que "this" apunte al objeto creado
Persona.call(objeto, "Juan", 30);

// dentro del constructor ocurre esto:
// objeto.nombre = "Juan"
// objeto.edad = 30

// 4️⃣ finalmente se devuelve el objeto
return objeto;Lenguaje del código: JavaScript (javascript)

Esto explica por qué el objeto puede usar métodos de la clase:

persona1.saludar();Lenguaje del código: CSS (css)

Porque el método vive en el prototipo de la clase.

NOTA! Recuerda que las clases son azúcar sintáctica de los
prototipos en JavaScript

Después de crear la instancia, el objeto queda conceptualmente así:

persona1
  nombre → "Juan"
  edad → 30
  prototype → Persona.prototype
                   saludar()Lenguaje del código: JavaScript (javascript)

✅ IDEA A TENER EN MENTE:

  • El constructor prepara el objeto cuando se crea.
  • new crea la instancia, ejecuta el constructor y devuelve el objeto.
  • La clase funciona como una plantilla para generar objetos organizados.

4. Clases y su interacción con el DOM.

4.1. ¿Por qué usar clases para trabajar con el DOM?

Cuando una aplicación empieza a crecer, el código del DOM puede volverse difícil de mantener si todo está en funciones sueltas.

Las clases permiten organizar ese código creando componentes reutilizables.

Una clase puede encargarse de:

  • Guardar referencias a elementos del DOM
  • Definir comportamientos (métodos)
  • Manejar eventos
  • Actualizar la interfaz

Es decir:

Clase → organiza la lógica del componente
Instancia → controla un elemento del DOM

4.2. Ejemplo simple: botón con comportamiento

Supongamos que tenemos este botón HTML

<button id="miBoton">Hacer click</button>Lenguaje del código: HTML, XML (xml)

Creamos una clase donde controlamos el botón

class Boton {

  constructor(elemento) {
    // guardamos el elemento del DOM dentro del objeto
    // "this.elemento" será una propiedad de la instancia
    this.elemento = elemento;
  }

  activarEvento() {

    // agregamos un evento al elemento del DOM
    this.elemento.addEventListener("click", () => {

      // este código se ejecutará cuando el usuario haga click
      console.log("El botón fue presionado");

    });

  }

}Lenguaje del código: JavaScript (javascript)

Creamos la instancia del componente

// seleccionamos el elemento del DOM
const botonDOM = document.getElementById("miBoton");

// creamos una instancia de la clase
const boton = new Boton(botonDOM);

// ejecutamos el método que activa el comportamiento
boton.activarEvento();Lenguaje del código: JavaScript (javascript)

¿Qué está ocurriendo en este ejemplo?

  1. Paso 1 — Seleccionamos el elemento del DOM
    • const botonDOM = document.getElementById(«miBoton»);
    • Esto devuelve el elemento HTML.
  2. Paso 2 — Creamos un objeto con la clase
    • const boton = new Boton(botonDOM);
    • Esto hace que el constructor reciba el elemento.
    • Dentro del constructor ocurre:
      • this.elemento = botonDOM;
      • Ahora el objeto tiene acceso al elemento del DOM.
  3. Paso 3 — Usamos el método del componente
    • boton.activarEvento();
    • El método agrega el evento click al botón.

💡¿Cómo organizan las clases el código del DOM?

Usar clases permite estructurar el código así:

Clase
 ├─ constructor → guarda referencias al DOM
 ├─ métodos → manipulan el DOM
 └─ eventos → interacción del usuarioLenguaje del código: JavaScript (javascript)

Esto hace que el código sea:

  • más ordenado
  • más reutilizable
  • más escalable

5. Ejemplos de casos reales donde se usan la clases

Las clases en JavaScript no son solo una forma de escribir código elegante; son herramientas estructurales que se utilizan en casi todas las aplicaciones modernas para resolver problemas de orden y repetición.

Aquí te presento los casos de uso más comunes en el mundo real:

5.1. Componentes de Interfaz de Usuario (UI)

Es el uso más frecuente en la manipulación del DOM. En lugar de tratar a tu página web como un solo documento gigante, la divides en piezas independientes.

  • Modales y Pop-ups: Una clase controla cuándo se abre, cuándo se cierra y qué información muestra. Cada vez que necesitas un cartel nuevo, creas una instancia.
  • Reproductores de Video/Audio: Las clases gestionan el estado interno (¿está en pausa?, ¿en qué segundo va?) y sincronizan ese estado con los botones de «Play» o la barra de progreso en el HTML.
  • Sistemas de Pestañas (Tabs): Una clase se encarga de ocultar un panel y mostrar otro cuando el usuario hace clic, manteniendo la lógica de «cuál es la pestaña activa» encapsulada.

5.2. Gestión de Datos y Estado (Business Logic)

Fuera del DOM, las clases se usan para modelar el «corazón» de la aplicación, es decir, la información con la que el usuario interactúa.

  • Carritos de Compra: En un e-commerce, una clase Carrito se encarga de sumar precios, aplicar descuentos y llevar la cuenta de cuántos productos hay. No importa si el usuario está en la página de inicio o en el checkout, la clase mantiene los datos consistentes.
  • Sistemas de Autenticación: Una clase Usuario puede almacenar el nombre, el token de sesión y los permisos. Así, cualquier parte de la app puede preguntarle a esa clase: «¿El usuario tiene permiso para borrar este archivo?».

5.3. Conexión con Servicios Externos (APIs)

Las clases son excelentes para organizar cómo tu aplicación se comunica con el mundo exterior.

  • Clientes de API: Se suele crear una clase para manejar todas las peticiones a un servidor (como obtener datos del clima o de una base de datos). La clase centraliza la configuración (como las contraseñas o URLs base), evitando que tengas que repetir esa información en cada rincón del proyecto.

5.4. Desarrollo de Videojuegos

Este es el escenario donde la Programación Orientada a Objetos brilla por excelencia.

  • Entidades del juego: Cada enemigo, proyectil o ítem es una instancia de una clase. La clase define que todos los «Enemigos» tienen vida y pueden atacar, pero cada instancia (cada enemigo en pantalla) tiene su propia posición y salud actual.

5.5. Herramientas de «Logging» y Errores

Las aplicaciones profesionales necesitan rastrear qué hace el usuario y qué falló.

  • Gestores de Errores: Se usa una clase para capturar errores, darles un formato legible y enviarlos a un servidor de reportes automáticamente.

¿Por qué se prefiere este enfoque en la vida real?

La respuesta corta es la escalabilidad. Si usas funciones sueltas para un proyecto pequeño, todo bien. Pero si tu proyecto crece y tienes 50 botones, 20 formularios y 10 tablas, sin clases el código se vuelve imposible de mantener porque las funciones empiezan a mezclarse y a causar errores entre sí. Las clases crean «fronteras» claras entre las diferentes funcionalidades.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *