Prototypes and Inheritance

Every JavaScript object has a hidden link to another object called its prototype. When you access a property that does not exist directly on an object, JavaScript automatically walks up the prototype chain — checking each prototype in turn — until it finds the property or reaches the end of the chain (null). This is the mechanism behind every array method, every DOM method, and every string helper you use. Understanding prototypes explains why instanceof works, how method sharing saves memory, and what ES6 classes actually compile to.

The Prototype Chain #

Prototype Utility Methods #

ES5 Prototype Pattern vs ES6 Class #

Basic Example #

// ── How the prototype chain works ─────────────────────────────────────────
const arr = [1, 2, 3];
// arr has no 'map' property — JS looks up the chain:
// arr -> Array.prototype -> finds map -> calls it
console.log(Object.getPrototypeOf(arr) === Array.prototype);          // true
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype));                 // null — end

// ── ES5 constructor + prototype ───────────────────────────────────────────
function Animal(name, sound) {
    this.name  = name;   // instance property — unique per instance
    this.sound = sound;
}

// Shared method — one copy for all instances
Animal.prototype.speak = function() {
    return `${this.name} says ${this.sound}!`;
};

const cat = new Animal('Cat', 'Meow');
const dog = new Animal('Dog', 'Woof');

console.log(cat.speak());              // 'Cat says Meow!'
console.log(cat.speak === dog.speak);  // true — same function object

// ── Inheritance via Object.create ─────────────────────────────────────────
function Pet(name, sound, owner) {
    Animal.call(this, name, sound);   // call parent constructor
    this.owner = owner;
}

Pet.prototype = Object.create(Animal.prototype);
Pet.prototype.constructor = Pet;   // restore constructor reference

Pet.prototype.info = function() {
    return `${this.speak()} (owned by ${this.owner})`;
};

const myDog = new Pet('Rex', 'Woof', 'Alice');
console.log(myDog.info());           // 'Rex says Woof! (owned by Alice)'
console.log(myDog instanceof Pet);   // true
console.log(myDog instanceof Animal);// true — chain includes Animal.prototype

// ── Object.create for prototypal delegation ──────────────────────────────
const vehicleProto = {
    describe() { return `${this.make} ${this.model} (${this.year})`; },
    age()      { return new Date().getFullYear() - this.year; },
};

function createVehicle(make, model, year) {
    return Object.assign(Object.create(vehicleProto), { make, model, year });
}

const car = createVehicle('Toyota', 'Corolla', 2020);
console.log(car.describe());                  // 'Toyota Corolla (2020)'
console.log(Object.hasOwn(car, 'make'));      // true  — own property
console.log(Object.hasOwn(car, 'describe')); // false — prototype property

How It Works #

Step 1 — Property Lookup Walks the Chain #

When you access arr.map, JavaScript checks if arr owns a map property. It does not — so JavaScript checks arr‘s prototype (Array.prototype), finds map there, and returns it. This walk happens automatically and transparently for every property access.

Step 2 — new Wires Up the Prototype #

new Animal('Cat', 'Meow') creates a fresh empty object, sets its prototype to Animal.prototype, runs the constructor with this pointing to the new object, and returns it. The speak method is not copied — it lives on the shared prototype.

Step 3 — Object.create Sets an Explicit Prototype #

Object.create(Animal.prototype) creates a new empty object whose prototype is Animal.prototype. Assigning this to Pet.prototype means every Pet instance can walk up the chain to find Animal’s methods. This is exactly what extends does automatically in ES6.

Step 4 — Restoring constructor After Prototype Assignment #

After Pet.prototype = Object.create(Animal.prototype), the constructor property of Pet.prototype points to Animal (because we replaced the original Pet.prototype). The line Pet.prototype.constructor = Pet restores the correct reference.

Step 5 — instanceof Checks the Entire Chain #

myDog instanceof Animal is true because Animal.prototype appears somewhere in myDog‘s chain — even though the immediate prototype is Pet.prototype. instanceof traverses the entire chain looking for the constructor’s prototype.

Real-World Example: Linked List #

// linked-list.js

function Node(value) {
    this.value = value;
    this.next  = null;
}

function LinkedList() {
    this.head   = null;
    this.length = 0;
}

LinkedList.prototype.push = function(value) {
    const node = new Node(value);
    if (!this.head) { this.head = node; }
    else {
        let cur = this.head;
        while (cur.next) cur = cur.next;
        cur.next = node;
    }
    this.length++;
    return this;
};

LinkedList.prototype.toArray = function() {
    const result = [];
    let cur = this.head;
    while (cur) { result.push(cur.value); cur = cur.next; }
    return result;
};

LinkedList.prototype.find = function(predicate) {
    let cur = this.head;
    while (cur) {
        if (predicate(cur.value)) return cur.value;
        cur = cur.next;
    }
    return undefined;
};

const list = new LinkedList();
list.push(10).push(20).push(30).push(40);
console.log(list.toArray());          // [10, 20, 30, 40]
console.log(list.find(v => v > 25));  // 30
console.log(list.length);             // 4

Common Mistakes #

Mistake 1 — Forgetting to restore constructor #

❌ Wrong — Pet.prototype.constructor now points to Animal:

Pet.prototype = Object.create(Animal.prototype);
// Missing: Pet.prototype.constructor = Pet;

✅ Correct — always restore after wiring:

Pet.prototype = Object.create(Animal.prototype);
Pet.prototype.constructor = Pet;

Mistake 2 — Shared mutable data on prototype #

❌ Wrong — all instances share the same array:

Cart.prototype.items = [];   // every Cart instance pushes to the SAME array!

✅ Correct — initialise per-instance data in constructor:

function Cart() { this.items = []; }

Mistake 3 — Extending built-in prototypes #

❌ Wrong — pollutes the global Array for all code:

Array.prototype.sum = function() { return this.reduce((a,b) => a+b, 0); };

✅ Correct — define utilities in your own module:

export const sum = arr => arr.reduce((a, b) => a + b, 0);

▶ Try It Yourself

Quick Reference #