Las clases usando Class

En JavaScript, las clases proporcionan una forma más clara y concisa de crear objetos y gestionar herencia en comparación con las funciones constructoras tradicionales. La sintaxis de class fue introducida en ES6 (ECMAScript 2015) y es muy similar a las clases en otros lenguajes de programación orientados a objetos como Java o Python.

1. Qué es una clase? #

Una clase es una plantilla para crear objetos con propiedades y métodos. Estas propiedades y métodos definen las características y comportamientos de los objetos creados a partir de la clase.

¿Cómo se define una clase? #

Se define una clase usando la palabra clave class seguida del nombre de la clase (por convención, el nombre de la clase empieza con una letra mayúscula). Dentro de la clase, puedes definir un constructor y otros métodos.

Ejemplo básico de una clase:

 
1class Persona {
2  constructor(nombre, edad) {
3    this.nombre = nombre;
4    this.edad = edad;
5  }
6
7  saludar() {
8    console.log(`Hola, mi nombre es ${this.nombre } y tengo ${ this.edad } años.`);
9  }
10}
11
12let persona1 = new Persona("Juan", 30);
13let persona2 = new Persona("Ana", 25);
14
15persona1.saludar(); // Muestra "Hola, mi nombre es Juan y tengo 30 años."
16persona2.saludar(); // Muestra "Hola, mi nombre es Ana y tengo 25 años."
Salida de consola
Hola, mi nombre es Juan y tengo 30 años.
Hola, mi nombre es Ana y tengo 25 años.

En este ejemplo:

• class Persona: Define una clase llamada Persona.
• constructor(nombre, edad): Es un método especial que se ejecuta cuando se crea un nuevo objeto de la clase. Inicializa las propiedades del objeto (nombre y edad).
• saludar(): Es un método que pertenece a la clase Persona. Los objetos creados a partir de esta clase pueden usar este método.

Creación de objetos con new #

Para crear un nuevo objeto a partir de una clase, se usa la palabra clave new seguida del nombre de la clase y los argumentos necesarios para el constructor.

Ejemplo:

1let persona1 = new Persona("Juan", 30);

Esto crea un nuevo objeto persona1 basado en la clase Persona, con nombre igual a "Juan" y edad igual a 30.

Herencia en clases #

Las clases en JavaScript también soportan herencia, lo que significa que una clase puede heredar propiedades y métodos de otra clase.

Ejemplo de herencia:

 
1class Persona {
2  constructor(nombre, edad) {
3    this.nombre = nombre;
4    this.edad = edad;
5  }
6  saludar() {
7    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
8  }
9}
10
11class Estudiante extends Persona {
12  constructor(nombre, edad, curso) {
13    super(nombre, edad); // Llama al constructor de la clase base (Persona)
14    this.curso = curso;
15  }
16  estudiar() {
17    console.log(`${this.nombre} está estudiando el curso de ${this.curso}.`);
18  }
19}
20
21let estudiante1 = new Estudiante("Luis", 20, "Matemáticas");
22
23estudiante1.saludar();  // Muestra "Hola, mi nombre es Luis y tengo 20 años."
24estudiante1.estudiar(); // Muestra "Luis está estudiando el curso de Matemáticas."
Salida de consola
Hola, mi nombre es Luis y tengo 20 años.
Luis está estudiando el curso de Matemáticas.

2. Características Modernas de Clases (ES2020 – ES2022) #

A) Campos y Métodos Privados con almohadilla (#) #

Desde ES2022, JavaScript soporta encapsulación real mediante el prefijo #. Las propiedades o métodos privados no son accesibles desde fuera de la clase ni por subclases:

 
1class CuentaBancaria {
2  #saldo = 0; // Campo privado estricto
3
4  constructor(titular, saldoInicial) {
5    this.titular = titular;
6    this.#saldo = saldoInicial;
7  }
8
9  depositar(monto) {
10    if (monto > 0) {
11      this.#saldo += monto;
12      this.#registrarTransaccion("Depósito", monto);
13    }
14  }
15
16  // Método privado
17  #registrarTransaccion(tipo, monto) {
18    console.log(`[Log Privado] ${tipo} de ${monto} €. Saldo actual: ${this.#saldo} €`);
19  }
20
21  // Getter para consultar el saldo de forma controlada
22  get saldo() {
23    return this.#saldo;
24  }
25}
26
27const miCuenta = new CuentaBancaria("Carlos", 1000);
28miCuenta.depositar(250);
29console.log(`Saldo visible: ${miCuenta.saldo} €`);
30// miCuenta.#saldo = 5000; // ❌ SyntaxError: Private field '#saldo' must be declared in an enclosing class
Salida de consola
[Log Privado] Depósito de 250 €. Saldo actual: 1250 €
Saldo visible: 1250 €

B) Propiedades y Métodos Estáticos (static) y Bloques de Inicialización (static {}) #

Los miembros estáticos pertenecen a la clase misma y no a las instancias:

 
1class ConfiguracionApp {
2  static #servidor = "api.midominio.com";
3  static puerto = 443;
4  static urlCompleta;
5
6  // Bloque de inicialización estática (ES2022)
7  static {
8    this.urlCompleta = `https://${this.#servidor}:${this.puerto}`;
9  }
10
11  static obtenerUrl() {
12    return this.urlCompleta;
13  }
14}
15
16console.log(ConfiguracionApp.obtenerUrl());
Salida de consola
https://api.midominio.com:443