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.
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
javascriptfunction 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)
javascript// 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.prototypeThe 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:
javascriptconst 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)
javascriptclass 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 delegationclass syntax creates the exact same prototype chain as Way 1. The underlying mechanism is identical — only the syntax differs.
Prototype Chain Diagram
texttesla (instance)
│
└──[[Prototype]]──→ Car.prototype { honk }
│
[[Prototype]]──→ Vehicle.prototype { describe, start }
│
[[Prototype]]──→ Object.prototype { toString, ... }
│
[[Prototype]]──→ nullWhen tesla.describe() is called:
- Does
teslahave own propertydescribe? No - Does
Car.prototypehavedescribe? No - Does
Vehicle.prototypehavedescribe? Yes → call it withthis = 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:
javascriptclass 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.speakThe 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:
javascriptclass 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:
javascriptconst 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
| Behavior | Description |
|---|---|
| Delegation, not copying | Properties are looked up on the prototype at runtime, not copied to instances |
| Shared prototype | All instances share the same prototype object and its methods |
| Live updates | Changing prototype methods affects all instances immediately |
| Single chain | Each object has one [[Prototype]] (use mixins for multiple-source behaviors) |
| Shadowing | Own properties on the instance hide same-named prototype properties |
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
Frequently Asked Questions
Is prototypal inheritance less powerful than classical inheritance?
Should I use Object.create or class for inheritance?
Can I inherit from multiple parents?
Does every method call walk the prototype chain?
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.
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.