How Prototypal Inheritance Works in JavaScript

Understand prototypal inheritance in JavaScript: how objects inherit from other objects, the difference from classical inheritance, delegation patterns, Object.create, and how class syntax maps to prototypes under the hood.

JavaScriptintermediate
RuneHub Team
RuneHub Team
13 min read

Most programming languages use classical inheritance — classes are blueprints that are copied into instances. JavaScript uses prototypal inheritance — objects link to other objects and delegate property lookups up the chain. This distinction sounds subtle but has significant practical consequences for how you design and extend code. This guide explains both the mechanics and the practical patterns.

Classical vs Prototypal: The Core Difference

In classical inheritance (Java, C++, Python):

  • A class is a blueprint
  • new ClassName() copies the blueprint into a new instance
  • Changing the class after creating instances does not affect existing instances (varies by language)

In JavaScript's prototypal inheritance:

  • Objects link to other objects via [[Prototype]]
  • No copying happens — properties are delegated up the chain at lookup time
  • Changing the prototype object immediately affects all instances that reference it
javascriptjavascript
function Animal(name) { this.name = name; }
Animal.prototype.speak = function() { return `${this.name} makes a sound`; };
 
const dog = new Animal("Rex");
console.log(dog.speak()); // "Rex makes a sound"
 
// Modify prototype AFTER creating instance:
Animal.prototype.speak = function() { return `${this.name} speaks differently now`; };
console.log(dog.speak()); // "Rex speaks differently now" — live delegation!

The Three Ways to Set Up Prototypal Inheritance

Way 1: Constructor Functions (Pre-ES6)

javascriptjavascript
// Parent constructor
function Vehicle(make, model) {
  this.make = make;
  this.model = model;
}
Vehicle.prototype.describe = function() {
  return `${this.make} ${this.model}`;
};
Vehicle.prototype.start = function() {
  return `${this.model} engine starting`;
};
 
// Child constructor
function Car(make, model, doors) {
  Vehicle.call(this, make, model); // Call parent constructor to set own properties
  this.doors = doors;
}
// Set up prototype chain: Car.prototype → Vehicle.prototype
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // Restore constructor reference
 
Car.prototype.honk = function() {
  return `${this.model} beeps`;
};
 
const tesla = new Car("Tesla", "Model 3", 4);
console.log(tesla.describe()); // "Tesla Model 3" — from Vehicle.prototype
console.log(tesla.honk());     // "Model 3 beeps" — from Car.prototype
console.log(tesla instanceof Car);     // true
console.log(tesla instanceof Vehicle); // true — chain includes Vehicle.prototype

The critical line: Car.prototype = Object.create(Vehicle.prototype) sets Car.prototype's [[Prototype]] to Vehicle.prototype, creating the inheritance chain.

Way 2: Object.create (Pure Prototypal)

Without constructor functions at all:

javascriptjavascript
const vehicleProto = {
  init(make, model) {
    this.make = make;
    this.model = model;
    return this; // Enable chaining
  },
  describe() {
    return `${this.make} ${this.model}`;
  },
  start() {
    return `${this.model} starting`;
  },
};
 
const carProto = Object.create(vehicleProto); // carProto → vehicleProto
carProto.initCar = function(make, model, doors) {
  this.init(make, model); // Delegate to parent init
  this.doors = doors;
  return this;
};
carProto.honk = function() {
  return `${this.model} beeps`;
};
 
// Create instance
const tesla = Object.create(carProto).initCar("Tesla", "Model 3", 4);
console.log(tesla.describe()); // "Tesla Model 3" — delegated to vehicleProto
console.log(tesla.honk());     // "Model 3 beeps"

This "OLOO" (Objects Linking to Other Objects) style avoids constructor functions entirely.

Way 3: ES6 class (Syntactic Sugar)

javascriptjavascript
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  describe() { return `${this.make} ${this.model}`; }
  start() { return `${this.model} starting`; }
}
 
class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model); // Calls Vehicle constructor
    this.doors = doors;
  }
  honk() { return `${this.model} beeps`; }
}
 
const tesla = new Car("Tesla", "Model 3", 4);
console.log(tesla.describe()); // Car.prototype → Vehicle.prototype delegation

class syntax creates the exact same prototype chain as Way 1. The underlying mechanism is identical — only the syntax differs.

Prototype Chain Diagram

texttext
tesla (instance)
   │
   └──[[Prototype]]──→ Car.prototype { honk }
                              │
                   [[Prototype]]──→ Vehicle.prototype { describe, start }
                                           │
                                [[Prototype]]──→ Object.prototype { toString, ... }
                                                        │
                                             [[Prototype]]──→ null

When tesla.describe() is called:

  1. Does tesla have own property describe? No
  2. Does Car.prototype have describe? No
  3. Does Vehicle.prototype have describe? Yes → call it with this = tesla

Understanding this traversal is the mental model for all prototypal inheritance.

Method Overriding

Subclasses can override parent methods by placing a same-named property on the child prototype:

javascriptjavascript
class Animal {
  speak() { return `${this.name} makes a sound`; }
}
 
class Dog extends Animal {
  speak() { return `${this.name} barks`; } // Shadows Animal.prototype.speak
}
 
class Cat extends Animal {
  // Does NOT override speak — inherits from Animal.prototype
}
 
const dog = new Dog();
dog.name = "Rex";
const cat = new Cat();
cat.name = "Whiskers";
 
console.log(dog.speak()); // "Rex barks" — Dog.prototype.speak (shadow)
console.log(cat.speak()); // "Whiskers makes a sound" — Animal.prototype.speak

The dog.speak() → Dog.prototype.speak lookup stops before reaching Animal.prototype.speak. This is method shadowing (not overriding in the classical sense — both versions coexist on the chain).

Calling Parent Methods With super

When overriding, you often want to extend the parent behavior, not replace it:

javascriptjavascript
class Vehicle {
  start() { return "Engine on"; }
}
 
class ElectricCar extends Vehicle {
  start() {
    const base = super.start(); // Calls Vehicle.prototype.start
    return `${base}, battery check complete`;
  }
}
 
const ev = new ElectricCar();
console.log(ev.start()); // "Engine on, battery check complete"

For full coverage of super, see using the super keyword in JavaScript classes.

Mixin Pattern: Composing Behaviors

Prototypal inheritance is single-chain (an object has one prototype). Mixins let you compose behavior from multiple sources:

javascriptjavascript
const Serializable = (Base) => class extends Base {
  serialize() { return JSON.stringify(this); }
  static deserialize(json) { return Object.assign(new this(), JSON.parse(json)); }
};
 
const Validatable = (Base) => class extends Base {
  validate() {
    return Object.entries(this.rules || {}).every(([field, rule]) => rule(this[field]));
  }
};
 
class Entity {
  constructor(data) { Object.assign(this, data); }
}
 
class User extends Serializable(Validatable(Entity)) {
  constructor(data) {
    super(data);
    this.rules = {
      name: (v) => typeof v === "string" && v.length > 0,
      age: (v) => typeof v === "number" && v >= 0,
    };
  }
}
 
const user = new User({ name: "Alice", age: 30 });
console.log(user.validate());   // true
console.log(user.serialize());  // '{"name":"Alice","age":30,...}'

Prototypal Inheritance Key Behaviors

BehaviorDescription
Delegation, not copyingProperties are looked up on the prototype at runtime, not copied to instances
Shared prototypeAll instances share the same prototype object and its methods
Live updatesChanging prototype methods affects all instances immediately
Single chainEach object has one [[Prototype]] (use mixins for multiple-source behaviors)
ShadowingOwn properties on the instance hide same-named prototype properties
Rune AI

Rune AI

Key Insights

  • Prototypal inheritance delegates, not copies: Objects link to prototypes and look up properties at runtime — no blueprint copying occurs
  • All three syntax forms create the same chain: Constructor functions with Object.create, OLOO style, and class extends are semantically equivalent at the runtime level
  • Live chain means live updates: Adding or changing a method on a prototype immediately affects all objects that inherit from it, even those already created
  • Method shadowing, not true overriding: Subclass methods shadow parent methods — both exist on the chain; super.method() reaches the parent version
  • Mixins fill the multiple-inheritance gap: Single-chain inheritance limits composition to one parent; mixin functions applying multiple class extensions enable multi-source behavior composition
RunePowered by Rune AI

Frequently Asked Questions

Is prototypal inheritance less powerful than classical inheritance?

No. Prototypal inheritance can express everything classical inheritance can, and in some ways is more flexible (since prototypes are plain objects that can be modified at runtime). The difference is mostly conceptual and syntactic.

Should I use Object.create or class for inheritance?

Use `class extends` for most object-oriented code — it is the standard modern approach, readable, and tooling understands it well. Use `Object.create` for explicit prototype setup or when building non-constructor-based delegation patterns.

Can I inherit from multiple parents?

Not directly via the prototype chain. JavaScript supports single-prototype inheritance. Use mixin functions (as shown above) to compose behavior from multiple sources. For an alternative, see how the [prototype chain](/tutorials/programming-languages/javascript/the-javascript-prototype-chain-complete-guide) is structured.

Does every method call walk the prototype chain?

In practice, no. JavaScript engines use inline caches that remember where a property was found after the first lookup. For monomorphic call sites (always the same object shape), subsequent calls are as fast as direct property access.

Conclusion

Prototypal inheritance delegates property lookups to linked prototype objects rather than copying blueprints into instances. Constructor functions, Object.create, and class extends all create the same chain — they differ only in syntax. The key insight is that methods live on prototype objects, not instances, and are looked up dynamically at call time. This is why modifying a prototype affects all its downstream instances immediately. For related topics, see the prototype chain in depth, constructor functions, and JavaScript classes.

Tags

Intermediate JavaScriptJavaScriptPrototypesOOPInheritance
Previous
JavaScript __proto__ vs prototype: What Is the Difference?
11 min read · intermediate
Next
Modifying the JavaScript Object Prototype: Guide
11 min read · intermediate

More in this topic

OffscreenCanvas API in JS for UI Performance

Master the OffscreenCanvas API to offload rendering from the main thread. Covers worker-based 2D and WebGL rendering, animation loops inside workers, bitmap transfer, double buffering, chart rendering pipelines, image processing, and performance measurement strategies.

Advanced Web Workers for High Performance JS

Master Web Workers for truly parallel JavaScript execution. Covers dedicated and shared workers, structured cloning, transferable objects, SharedArrayBuffer with Atomics, worker pools, task scheduling, Comlink RPC patterns, module workers, and performance profiling strategies.

JavaScript Macros and Abstract Code Generation

Master JavaScript code generation techniques for compile-time and runtime metaprogramming. Covers AST manipulation, Babel plugin authorship, tagged template literals as macros, code generation pipelines, source-to-source transformation, compile-time evaluation, and safe eval alternatives.