DEV Community

Oscar olg
Oscar olg

Posted on

Tutorial sobre como crear objetos en javascript con programación orientada a objetos

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.

Enter fullscreen mode Exit fullscreen mode

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}`;
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.`);
  }
}

Enter fullscreen mode Exit fullscreen mode

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á.`);
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

¿Qué aprendimos aquí?

  1. super(): Es obligatorio cuando usas extends. Le dice a JavaScript: "Primero configura las propiedades básicas que vienen del padre".
  2. Especialización: El Mago tiene mana, pero el Guerrero no. Esto mantiene el código limpio.
  3. 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)