En JavaScript moderno, utilizamos la palabra clave class (introducida en ES6) para crear moldes de objetos. Aquí tienes una guía paso a paso.
1. La Estructura de una Clase
Imagina que una clase es el plano arquitectónico y el objeto es la casa ya construida.
Componentes clave:
- Constructor: Una función especial que se ejecuta automáticamente al crear un objeto. Sirve para inicializar propiedades.
- Propiedades: Son las características (variables) del objeto.
- Métodos: Son las acciones (funciones) que el objeto puede realizar.
Ejemplo de código:
class Persona {
// El constructor define qué datos necesita el objeto al nacer
constructor(nombre, edad) {
this.nombre = nombre; // "this" se refiere al objeto que estamos creando
this.edad = edad;
}
// Esto es un método (una acción)
saludar() {
console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
}
}
// Crear una "instancia" (un objeto real basado en la clase)
const usuario1 = new Persona("Ana", 28);
const usuario2 = new Persona("Luis", 35);
usuario1.saludar(); // Salida: Hola, mi nombre es Ana y tengo 28 años.
2. Los 4 Pilares de la POO en JavaScript
Para dominar los objetos, debes conocer estos conceptos:
A. Encapsulamiento (Privacidad)
A veces no quieres que nadie modifique los datos internos de un objeto directamente. En JS moderno, usamos el símbolo # para hacer propiedades privadas.
class CuentaBancaria {
#saldo = 0; // Propiedad privada
depositar(cantidad) {
this.#saldo += cantidad;
}
verSaldo() {
return `Tu saldo es de $${this.#saldo}`;
}
}
B. Herencia
Permite que una clase "hija" herede propiedades y métodos de una clase "padre". Se usa la palabra clave extends.
class Animal {
constructor(nombre) {
this.nombre = nombre;
}
comer() {
console.log(`${this.nombre} está comiendo.`);
}
}
class Perro extends Animal {
ladrar() {
console.log("¡Guau guau!");
}
}
const miPerro = new Perro("Firulais");
miPerro.comer(); // Heredado de Animal
miPerro.ladrar(); // Propio de Perro
C. Polimorfismo
Es la capacidad de que diferentes clases respondan al mismo método de formas distintas. Por ejemplo, tanto un Gato como un Perro pueden tener un método hablar(), pero uno maúlla y el otro ladra.
D. Abstracción
Consiste en ocultar los detalles complejos y mostrar solo lo necesario al usuario del objeto.
3. Resumen rápido
| Concepto | Descripción |
|---|---|
| Clase | El molde o plantilla. |
| Objeto | La instancia real creada con new. |
| Constructor | Método que asigna valores iniciales. |
| this | Palabra clave que apunta al objeto actual. |
¡Genial! Vamos a construir un Sistema de Personajes de Videojuego. Este ejemplo es perfecto porque permite ver cómo la herencia y los métodos funcionan en un entorno real.
El Proyecto: Arena de Combate
Diseñaremos una clase base llamada Personaje y luego crearemos clases específicas para un Mago y un Guerrero.
1. Definir la clase base
Primero, creamos el molde general con lo que todos los personajes tienen en común: nombre, salud y un método para atacar.
class Personaje {
constructor(nombre, salud) {
this.nombre = nombre;
this.salud = salud;
}
recibirDanio(cantidad) {
this.salud -= cantidad;
console.log(`${this.nombre} recibió ${cantidad} de daño. Salud restante: ${this.salud}`);
if (this.salud <= 0) console.log(`${this.nombre} ha sido derrotado.`);
}
}
2. Aplicar Herencia y Polimorfismo
Ahora creamos las clases especializadas. Usaremos super() para llamar al constructor del padre.
class Guerrero extends Personaje {
constructor(nombre) {
super(nombre, 150); // El guerrero tiene más vida inicial
this.fuerza = 20;
}
// Método único del Guerrero
ataqueCuerpoACuerpo(objetivo) {
console.log(`${this.nombre} golpea con su espada a ${objetivo.nombre}!`);
objetivo.recibirDanio(this.fuerza);
}
}
class Mago extends Personaje {
constructor(nombre) {
super(nombre, 80); // El mago tiene menos vida
this.mana = 100;
}
// Método único del Mago
lanzarHechizo(objetivo) {
if (this.mana >= 30) {
console.log(`${this.nombre} lanza una bola de fuego a ${objetivo.nombre}!`);
this.mana -= 30;
objetivo.recibirDanio(40);
} else {
console.log(`${this.nombre} no tiene suficiente maná.`);
}
}
}
3. Pongámoslo a prueba
Copiando y pegando este código en tu consola de JavaScript (F12 en el navegador), puedes ejecutar esta simulación:
// 1. Instanciamos a nuestros héroes
const aragorn = new Guerrero("Aragorn");
const gandalf = new Mago("Gandalf");
// 2. Comienza el duelo
gandalf.lanzarHechizo(aragorn);
aragorn.ataqueCuerpoACuerpo(gandalf);
// 3. Revisamos el estado final
console.log(aragorn);
console.log(gandalf);
¿Qué aprendimos aquí?
-
super(): Es obligatorio cuando usasextends. Le dice a JavaScript: "Primero configura las propiedades básicas que vienen del padre". -
Especialización: El
Magotienemana, pero elGuerrerono. Esto mantiene el código limpio. -
Interacción: Los objetos pueden interactuar entre sí pasando una instancia (como
aragorn) como argumento a los métodos de otro objeto (gandalf.lanzarHechizo(aragorn)).
Top comments (0)