JS 11: POO

Clases, Objetos, Herencia y el paradigma moderno.

¿Qué es la POO?

Hasta ahora hemos programado dando órdenes paso a paso (Programación Procedural). La POO consiste en crear "Objetos" que contienen sus propios datos y funciones.

Analogía: El Molde de Galletas (Clase vs Objeto)

  • La Clase (Class): Es el molde. Define la forma, el tamaño y el dibujo. No se puede comer, solo sirve para crear.
  • El Objeto (Instance): Es la galleta real que sale del horno. Puedes crear 100 galletas con un solo molde. Cada galleta puede tener sus propias pepitas de chocolate (datos), pero todas tienen la misma forma.

1. Creando una Clase

Una clase es la plantilla. Usamos la palabra clave class. Dentro tiene un método especial llamado constructor que se ejecuta automáticamente al crear el objeto.

class Galleta {

    // El constructor configura la galleta nueva

    constructor(sabor, tamaño) {

        this.sabor = sabor;   // Propiedad: ¿A qué sabe?

        this.tamaño = tamaño; // Propiedad: ¿Cómo es de grande?

    }



    // Método: Lo que la galleta puede hacer

    describir() {

        return "Soy una galleta de " + this.sabor;

    }

}



// Crear objetos (Instanciar)

let galleta1 = new Galleta("Chocolate", "Grande");

let galleta2 = new Galleta("Vainilla", "Pequeña");



console.log(galleta1.describir()); // "Soy una galleta de Chocolate"

🔒 Propiedades Privadas (#)

A veces quieres que una propiedad no pueda verse ni tocarse desde fuera de la clase (como el ingrediente secreto). Usamos el hashtag #.

class Cocinero {
    #secreto = "Mucho azúcar"; // Privado

    revelar() {
        return "Mi secreto es " + this.#secreto;
    }
}

let javi = new Cocinero();
console.log(javi.revelar()); // ✅ Funciona
console.log(javi.#secreto);  // ❌ ERROR: Private field must be declared...

2. Herencia (Inheritance): No reinventes la rueda

Imagina que quieres hacer una "Galleta Rellena". Es igual que una galleta normal, pero tiene un extra. En lugar de copiar y pegar el código, usamos extends.

// GalletaRellena HEREDA de Galleta

class GalletaRellena extends Galleta {

    constructor(sabor, tamaño, relleno) {
        // "super" significa "Superclase" (el Padre)
        // super() llama al constructor de Galleta
        super(sabor, tamaño); 
        this.relleno = relleno;
    }



    // Podemos sobrescribir métodos

    describir() {

        return "Soy de " + this.sabor + " y tengo " + this.relleno;

    }

}

3. Demo Interactiva: Batalla RPG

Vamos a usar clases para crear personajes de un juego.

Volver a JS