Tema 4 · Clases ES6

Clases en ES6: La Sintaxis class, constructor() y Azúcar Sintáctico

Aprende a declarar clases modernas con la palabra clave class, define métodos de instancia limpios y comprende las diferencias con las funciones constructoras.

Funciones Constructoras y el Operador new: La POO antes de ES6 Encapsulamiento Moderno: Campos Privados (#), Getters y Setters

La Llegada de ECMAScript 2015 (ES6)

En 2015, JavaScript dio el salto evolutivo más grande de su historia al incorporar la palabra clave class.

Sin embargo, es fundamental entender que las clases en JavaScript son lo que en ciencias de la computación llamamos azúcar sintáctico (Syntactic Sugar): no introducen un nuevo modelo de programación orientada a objetos en el motor de JavaScript, sino que ofrecen una sintaxis elegante, limpia y estandarizada que construye prototipos por ti detrás de escena.

Diagrama: Lo que Escribes vs. Lo que se Crea en Memoria

Diagrama Clases ES6 vs Prototipos

Figura 4.1: La sintaxis moderna class adosa automáticamente los métodos al prototipo compartido.

Diferencias Vitales entre `class` y Funciones Normales

Aunque por debajo utilicen prototipos, las clases de ES6 incorporan tres protecciones de seguridad críticas:

Característica Funciones Constructoras Antiguas Clases Modernas con `class`
Obligatoriedad de `new` Si olvidabas new, contaminabas el objeto global window sin avisar. Obligatorio: Lanza TypeError: Class constructor cannot be invoked without 'new'.
Modo Estricto Opcional (debías escribir "use strict"). Siempre Activo: Todo el código de la clase corre en modo estricto de forma automática.
Elevación (Hoisting) Se elevaban al inicio del archivo. Sin Hoisting: Debes declarar la clase antes de poder instanciarla.

⚡ Modelado de un Producto E-Commerce con Clases Modernas ES6

Ejecuta el código en el Sandbox y observa la sintaxis limpia de métodos y campos públicos:

ProductoES6.js
Solo lectura 
// 1. Declaración de Clase en ES6
class Producto {
    // Campos públicos de clase (Class Fields - ES2022)
    activo = true;
    fechaRegistro = new Date().toLocaleDateString();

    // Método Constructor Único
    constructor(id, nombre, precio, stock = 0) {
        if (precio < 0) {
            throw new RangeError("El precio no puede ser negativo.");
        }
        this.id = id;
        this.nombre = nombre;
        this.precio = precio;
        this.stock = stock;
    }

    // Métodos de Instancia (automáticamente colocados en Producto.prototype)
    calcularIva(tasa = 0.21) {
        return parseFloat((this.precio * tasa).toFixed(2));
    }

    obtenerPrecioTotal() {
        return parseFloat((this.precio + this.calcularIva()).toFixed(2));
    }

    actualizarStock(unidades) {
        this.stock += unidades;
        console.log(`📦 Stock de [${this.nombre}] actualizado a: ${this.stock} unidades.`);
    }

    describir() {
        return `[#${this.id}] ${this.nombre} | Precio: $${this.precio.toFixed(2)} (+IVA: $${this.obtenerPrecioTotal()}) | Stock: ${this.stock}`;
    }
}

// ==========================================
// PRUEBA EN EL SANDBOX
// ==========================================
console.log("=== CREACIÓN DE INSTANCIAS CON ES6 ===");
const laptop = new Producto(1, "MacBook Air M2", 1199.00, 10);
const teclado = new Producto(2, "Teclado Mecánico Keychron", 89.50, 25);

console.log(laptop.describir());
console.log(teclado.describir());

console.log("\n=== OPERACIONES ===");
laptop.actualizarStock(-2); // Venta de 2 unidades
teclado.actualizarStock(15); // Reposición de inventario

console.log("\n=== VERIFICACIÓN DE PROTOTIPOS BAJO EL CAPÓ ===");
console.log("¿describir() reside en Producto.prototype?:", Producto.prototype.hasOwnProperty('describir')); // true!
console.log("¿laptop es instancia de Producto?:", laptop instanceof Producto); // true
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Qué sucede si intentas ejecutar una clase declarada con "class Usuario {}" invocándola como una función normal sin el operador "new" (ej: const u = Usuario();)?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de Programación Orientada a Objetos en JavaScript (POO) y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.