Lección 45: Clases (ES6)

🧠 Concepto

Las clases en JavaScript (introducidas en ES6) son una sintaxis más clara y simple para trabajar con la herencia prototípica. No son como las clases de Java o C++ — siguen siendo prototipos por debajo.

Sintaxis básica

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

  saludar() {
    console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años`);
  }
}

const ana = new Persona('Ana', 28);
ana.saludar(); // "Hola, soy Ana y tengo 28 años"

Diferencia con función constructora

// Función constructora (ES5)
function PersonaES5(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}
PersonaES5.prototype.saludar = function() {
  console.log(`Hola, soy ${this.nombre}`);
};

// Clase (ES6) — azúcar sintáctico
class PersonaES6 {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    console.log(`Hola, soy ${this.nombre}`);
  }
}

// Son esencialmente lo mismo
console.log(typeof PersonaES6); // "function"

💻 Ejemplo

class Rectangulo {
  constructor(ancho, alto) {
    this.ancho = ancho;
    this.alto = alto;
  }

  area() {
    return this.ancho * this.alto;
  }

  perimetro() {
    return 2 * (this.ancho + this.alto);
  }

  descripcion() {
    return `Rectángulo de ${this.ancho}x${this.alto}`;
  }
}

const rect = new Rectangulo(5, 3);
console.log(rect.area());        // 15
console.log(rect.perimetro());   // 16
console.log(rect.descripcion()); // "Rectángulo de 5x3"
console.log(rect instanceof Rectangulo); // true

// typeof class
console.log(typeof Rectangulo); // "function"

Características importantes

// Las clases NO tienen hoisting
// new Prueba(); // ReferenceError: Cannot access 'Prueba' before initialization
class Prueba {}

// Las clases son strict mode por defecto
class Ejemplo {
  constructor() {
    this.accion = function() {
      console.log(this); // undefined (strict mode)
    };
  }
}

// No se pueden llamar sin new
// const p = Persona('Ana', 28); // TypeError: Class constructor Persona cannot be invoked without 'new'

⚠️ Nota

Las clases en JavaScript son azúcar sintáctico sobre el sistema de prototipos. Esto significa:

1. Los métodos están en el prototipo, no en cada instancia
2. typeof Clase === 'function'
3. Se puede modificar el prototipo después de definir la clase

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

// Añadir método después de definir la clase
Mascota.prototype.sonido = function() {
  return '???';
};

const perro = new Mascota('Rex');
console.log(perro.sonido()); // "???"

🎯 Tip

Usa clases para:

• Modelar entidades del dominio (Usuario, Producto, Carrito)
• Organizar código relacionado con datos y comportamiento
• Facilitar la lectura para programadores de otros lenguajes

Pero recuerda: JavaScript es más flexible que los lenguajes orientados a clases. A veces un objeto simple o una función factory es más apropiado que una clase.

📝 Ejercicio

Crea una clase Libro con propiedades titulo, autor y año. Debe tener un método resumen() que devuelva “titulo por autor (año)”. Crea una instancia y llama al método.

class Libro {
  // Escribe aquí
}

const libro = new Libro('1984', 'George Orwell', 1949);
console.log(libro.resumen()); // "1984 por George Orwell (1949)"