Classes And Inheritance

JavaScript's class syntax gives you a clean, familiar way to define reusable object blueprints. Under the hood, classes are still built on the prototype system JavaScript has always used — but the syntax makes it much easier to reason about structure, share behaviour across instances, and extend existing types.

This lesson covers the full lifecycle of a class: defining it, instantiating it, adding methods, inheriting from it, and using modern features like static methods and private fields.

Defining a Class

A class is a template for creating objects. You define the initial state inside a special constructor method, and you add shared behaviour as regular methods on the class body.

class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  speak() {
    return `${this.name} says ${this.sound}!`;
  }

  describe() {
    return `I am ${this.name}.`;
  }
}

const cat = new Animal("Whiskers", "meow");
const dog = new Animal("Rex", "woof");

console.log(cat.speak());
console.log(dog.speak());
console.log(cat.describe());

// All instances share the same methods — they are not copied per object
console.log(cat.speak === dog.speak); // true

Each call to new Animal(...) creates a fresh object. The constructor receives the arguments you pass to new and sets them as properties on this. Methods defined in the class body are placed on the prototype, so they are shared across every instance rather than duplicated.

Inheritance with `extends`

The real power of classes comes when you need specialised versions of a base type. The extends keyword creates a child class that inherits all the methods of its parent.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a noise.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // must call super before accessing this
    this.breed = breed;
  }

  speak() {
    return `${this.name} barks.`;
  }

  fetch(item) {
    return `${this.name} fetches the ${item}!`;
  }
}

class Cat extends Animal {
  speak() {
    return `${this.name} meows.`;
  }
}

const dog = new Dog("Rex", "Labrador");
const cat = new Cat("Luna");

console.log(dog.speak());   // overridden method
console.log(cat.speak());   // overridden method
console.log(dog.fetch("ball")); // Dog-only method
console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true — also an Animal

Three things to notice here:

super(name) calls the parent constructor. You must call super before you use this in a child constructor.
Dog overrides speak with its own version. The parent's version is no longer called unless you explicitly invoke it.
instanceof checks the full inheritance chain, so a Dog is also an Animal.

Calling the Parent Method with `super`

Sometimes you want to extend a parent method rather than fully replace it. Use super.methodName() to call the parent's version and then add your own logic on top.

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
    this.speed = 0;
  }

  accelerate(amount) {
    this.speed += amount;
    return `${this.make} ${this.model} accelerating. Speed: ${this.speed} km/h`;
  }

  describe() {
    return `${this.make} ${this.model}`;
  }
}

class ElectricCar extends Vehicle {
  constructor(make, model, range) {
    super(make, model);
    this.range = range;
    this.battery = 100;
  }

  accelerate(amount) {
    // Extend the parent behaviour
    const result = super.accelerate(amount);
    this.battery -= amount * 0.5;
    return `${result} | Battery: ${this.battery.toFixed(1)}%`;
  }

  describe() {
    // Re-use the parent and add extra info
    return `${super.describe()} (Electric, ${this.range} km range)`;
  }
}

const tesla = new ElectricCar("Tesla", "Model 3", 500);
console.log(tesla.describe());
console.log(tesla.accelerate(10));
console.log(tesla.accelerate(20));

Static Methods and Private Fields

Static methods belong to the class itself, not to instances. They are ideal for factory functions, validators, or utility operations related to the class.

Private fields (prefixed with #) are truly inaccessible from outside the class. They enforce encapsulation and prevent accidental mutation.

class BankAccount {
  #balance; // private field

  constructor(owner, initialDeposit) {
    this.owner = owner;
    this.#balance = initialDeposit;
    this.transactions = [];
  }

  deposit(amount) {
    if (amount <= 0) throw new Error("Deposit must be positive");
    this.#balance += amount;
    this.transactions.push({ type: "deposit", amount });
    return this;
  }

  withdraw(amount) {
    if (amount > this.#balance) throw new Error("Insufficient funds");
    this.#balance -= amount;
    this.transactions.push({ type: "withdrawal", amount });
    return this;
  }

  get balance() {
    return this.#balance;
  }

  summary() {
    return `${this.owner}: £${this.#balance.toFixed(2)} (${this.transactions.length} transactions)`;
  }

  // Static factory method — creates an account with a zero balance
  static empty(owner) {
    return new BankAccount(owner, 0);
  }
}

const account = new BankAccount("Alice", 1000);
account.deposit(500).withdraw(200); // methods return this for chaining
console.log(account.summary());
console.log("Balance:", account.balance);

const newAccount = BankAccount.empty("Bob");
console.log(newAccount.summary());

// Private field is inaccessible from outside
try {
  console.log(account.#balance);
} catch (e) {
  console.log("Error:", e.message);
}

The get balance() syntax defines a getter — a property that computes its value from a method. Callers read it like a property (account.balance) but the class controls what they see.

Try It Yourself

Model a small content library. Create a base MediaItem class and two subclasses — Book and Podcast — each with their own way of reporting a duration or page count. Use a static method to parse items from plain objects.

class MediaItem {
  #plays = 0;

  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  play() {
    this.#plays++;
    return `Playing "${this.title}"`;
  }

  get plays() {
    return this.#plays;
  }

  info() {
    return `"${this.title}" by ${this.author}`;
  }

  static fromObject({ title, author, type, ...rest }) {
    if (type === "book") return new Book(title, author, rest.pages);
    if (type === "podcast") return new Podcast(title, author, rest.durationMin);
    throw new Error(`Unknown type: ${type}`);
  }
}

class Book extends MediaItem {
  constructor(title, author, pages) {
    super(title, author);
    this.pages = pages;
  }

  info() {
    return `${super.info()} — ${this.pages} pages`;
  }
}

class Podcast extends MediaItem {
  constructor(title, author, durationMin) {
    super(title, author);
    this.durationMin = durationMin;
  }

  info() {
    return `${super.info()} — ${this.durationMin} min episode`;
  }
}

// Build items from raw data
const rawItems = [
  { type: "book", title: "Clean Code", author: "Robert Martin", pages: 431 },
  { type: "podcast", title: "Syntax FM", author: "Wes & Scott", durationMin: 45 },
];

const library = rawItems.map(MediaItem.fromObject);

library.forEach(item => {
  item.play();
  item.play();
  console.log(item.info());
  console.log(`Played ${item.plays} times`);
  console.log("---");
});

Experiment by adding a Video subclass, a rating private field, or a static method that filters a library by type.

Key Takeaways

A class is a blueprint for creating objects. The constructor sets up initial state; methods are shared across all instances via the prototype.
Use extends to create a child class that inherits all of a parent's methods. Call super(...) in the child constructor before accessing this.
Override parent methods in child classes to specialise behaviour, and call super.methodName() when you want to extend rather than replace the parent's logic.
Static methods live on the class itself and are useful for factory functions and utilities that do not depend on instance state.
Private fields (#field) are only accessible inside the class body, making encapsulation explicit and enforced by the language.
instanceof traverses the full inheritance chain, so a child instance is also an instance of every ancestor class.

Pro Tip: Prefer composition over inheritance for complex domains. Deep inheritance hierarchies become brittle when requirements change. If you find yourself writing more than two levels deep (Animal → Mammal → Dog → GoldenRetriever), consider whether a flat class with injected behaviour — or a set of simple functions — would be easier to maintain.