Prototypes, Prototypal Inheritance & ES6 Classes

The __proto__ chain, prototype methods, class syntax, and super()

« The Event Loop: Microtasks & Macrotasks« Previous ES Modules: import, export & Tooling »Next »

Under the hood, JavaScript does not have classical inheritance—it uses prototypal delegation where objects inherit directly from other objects via the prototype chain.

Prototypal Delegation & ES6 Class Sugar

Every JavaScript object has an internal [[Prototype]] link referencing another object.

When you access obj.method(), JavaScript looks for it on obj. If not found, it traverses up the prototype chain until it reaches Object.prototype or null.

ES6 class: Syntactic sugar over the prototype system. Methods declared inside classes are attached to the prototype automatically to save memory.

ES6 Class Inheritance with Prototype Methods

Try It Yourself »

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

  // Method attached to Vehicle.prototype (shared across all instances)
  getDetails() {
    return `${this.make} ${this.model}`;
  }
}

class ElectricVehicle extends Vehicle {
  constructor(make, model, batteryKwh) {
    super(make, model); // Calls parent constructor
    this.batteryKwh = batteryKwh;
  }

  getDetails() {
    return `${super.getDetails()} (${this.batteryKwh} kWh Battery)`;
  }
}

const tesla = new ElectricVehicle("Tesla", "Model 3", 75);
console.log(tesla.getDetails());

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Where are methods declared inside an ES6 `class` stored in memory for instances of that class?

« Previous: The Event Loop: Microtasks & Macrotasks Next: ES Modules: import, export & Tooling »