Lección 4 · 4 de 20

Clases y herencia · JavaScript

Escriba clases en JavaScript con constructor, métodos encadenables y herencia con extends y super, con cuentas bancarias de ejemplo.

JavaScript · Clases y herencia en DMarlon Studio: el código del ejemplo y su salida en la terminal

La palabra `class` ofrece una sintaxis clara para lo que en la lección anterior se hacía con prototipos. El `constructor` se ejecuta con new y prepara el objeto (owner y balance, con 0 por defecto); los métodos como deposit y toString van a parar a Account.prototype y los comparten todas las cuentas.

deposit termina con return this: devuelve la propia cuenta y así permite encadenar llamadas, como en new Account("Ana").deposit(150).deposit(50).

`extends` crea una subclase: SavingsAccount hereda todo de Account y añade rate y addInterest(). En su constructor, `super(owner, balance)` llama al constructor de la clase madre, y es obligatorio hacerlo antes de usar this. Por dentro, extends enlaza los prototipos: el prototipo de SavingsAccount.prototype es Account.prototype.

Una subclase puede sobrescribir un método: el toString() de SavingsAccount sustituye al de Account, pero reutiliza el original con super.toString() y le añade el tipo de interés. String(savings) llama a ese toString. Por último, instanceof confirma que una cuenta de ahorro también es una Account, y typeof revela que una clase es, en el fondo, una función.

Código · main.js

class Account {  constructor(owner, balance = 0) {    this.owner = owner;    this.balance = balance;  }  deposit(amount) {    this.balance += amount;    return this; // returning this allows chaining  }  toString() {    return `${this.owner}: ${this.balance.toFixed(2)} EUR`;  }}// SavingsAccount inherits everything from Account and adds interest.class SavingsAccount extends Account {  constructor(owner, balance, rate) {    super(owner, balance); // runs Account's constructor first    this.rate = rate;  }  addInterest() {    return this.deposit(this.balance * this.rate);  }  toString() {    return `${super.toString()} (savings at ${this.rate * 100}%)`;  }}const current = new Account("Ana").deposit(150).deposit(50);const savings = new SavingsAccount("Luis", 1000, 0.02).addInterest();console.log(String(current));console.log(String(savings));console.log("Is savings an Account?", savings instanceof Account);console.log("A class is a", typeof SavingsAccount);

Salida · node main.js

Ana: 200.00 EUR
Luis: 1020.00 EUR (savings at 2%)
Is savings an Account? true
A class is a function

Para recordar

constructor prepara cada objeto creado con new.
Devolver this permite encadenar métodos.
extends hereda y super(...) llama al constructor de la clase madre.
super.metodo() reutiliza el método original al sobrescribirlo.
Una clase es una función que trabaja con prototipos.

Ejercicio

Cree una clase CheckingAccount que herede de Account, con un método withdraw(amount) que lance un error si el saldo quedara por debajo de cero, y pruebe a retirar 300 EUR de una cuenta con 200.