Lesson 4 · 4 of 20

Classes and inheritance · JavaScript

Write JavaScript classes with a constructor, chainable methods and inheritance through extends and super, using bank accounts.

JavaScript · Classes and inheritance in DMarlon Studio: the example's code and its output in the terminal

The `class` keyword gives a clean syntax for what the previous lesson did with prototypes. The `constructor` runs with new and sets up the object (owner and balance, which defaults to 0); methods such as deposit and toString end up on Account.prototype, shared by every account.

deposit ends with return this: it returns the account itself, which lets you chain calls, as in new Account("Ana").deposit(150).deposit(50).

`extends` creates a subclass: SavingsAccount inherits everything from Account and adds rate and addInterest(). In its constructor, `super(owner, balance)` calls the parent's constructor, and you must do it before using this. Under the hood, extends links the prototypes: the prototype of SavingsAccount.prototype is Account.prototype.

A subclass can override a method: SavingsAccount's toString() replaces Account's, but reuses the original through super.toString() and appends the interest rate. String(savings) calls that toString. Finally, instanceof confirms that a savings account is also an Account, and typeof reveals that a class is really a function.

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

Output · node main.js

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

Key points

constructor sets up each object created with new.
Returning this makes methods chainable.
extends inherits and super(...) calls the parent constructor.
super.method() reuses the original method when you override it.
A class is a function that works with prototypes.

Exercise

Create a CheckingAccount class that extends Account, with a withdraw(amount) method that throws an error if the balance would drop below zero, and try to withdraw 300 EUR from an account holding 200.