How does prototypal inheritance work in JavaScript, and how does it differ from classical inheritance?

Prototypal Inheritance

Every JavaScript object has a hidden [[Prototype]] property pointing to another object. When you access a property, JS walks up the chain until it finds it or reaches null.

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

dog.barks;    // true (own property)
dog.eats;     // true (from animal via prototype chain)
dog.toString; // [Function] (from Object.prototype)

Prototype Chain

dog → animal → Object.prototype → null

class is Syntactic Sugar

class Animal {
  constructor(name) { this.name = name; }
  speak() { return ${this.name} makes a noise; }
}

class Dog extends Animal {
  speak() { return ${this.name} barks; }
}

Under the hood this is:

function Animal(name) { this.name = name; }
Animal.prototype.speak = function() { return ${this.name} makes a noise; };

function Dog(name) { Animal.call(this, name); }
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() { return ${this.name} barks; };

Key Differences from Classical Inheritance

AspectJavaScriptJava/C++

MechanismPrototype chain (delegation)Class-based (copying)
Dynamic?Yes — add methods at runtimeNo — fixed at compile time
Multiple inheritanceVia mixins/Object.assignVia interfaces/traits
instanceofChecks prototype chainChecks class hierarchy
Objects created fromOther objectsClasses (blueprints)

Production Gotcha: _proto vs prototype

// proto is the ACTUAL prototype of an instance
dog.proto === Animal.prototype; // true

// prototype is a property on constructor functions
Animal.prototype === dog.proto; // true

// They are NOT the same thing
Dog.prototype !== Dog.proto;
// Dog.prototype → used for instances created by new Dog()
// Dog.proto_ → Animal.prototype (Dog inherits from Animal)

Why It Matters

Performance: Deep prototype chains slow property lookup

Security: Prototype pollution attacks can override Object.prototype

Libraries: Understanding this is essential for debugging React/Vue internals