← Bind, Call & Apply (Polyfills)Prototype Inheritance →

Prototypes (Deep Dive)

⚡ JavaScript's Prototypal Inheritance

JavaScript uses prototypes for inheritance, unlike classical inheritance in languages like Java or C++. Every object has a prototype, and properties/methods can be inherited through the prototype chain.

Prototype Chain Visualization

┌─────────────────────────────────────────────────┐
│              Your Object                          │
│  { name: 'John', age: 30 }                       │
│  __proto__ →                                      │
└─────────────────────┬─────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────┐
│            Object.prototype                      │
│  toString(), valueOf(), hasOwnProperty(), ...   │
│  __proto__ → null                               │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│           Function Constructor                   │
│  function Person(name) {                        │
│    this.name = name;                            │
│  }                                              │
│  __proto__ →                                    │
└─────────────────────┬─────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────┐
│          Function.prototype                      │
│  apply(), call(), bind(), ...                   │
│  __proto__ → Object.prototype                   │
└─────────────────────┬─────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────┐
│          Object.prototype                        │
│  __proto__ → null                               │
└─────────────────────────────────────────────────┘

Example 1: Understanding Prototypes

JavaScript Editor

// Understanding Prototypes

// Every object has a __proto__ property
const obj = { name: 'John' };

console.log('Object:', obj);
console.log('obj.__proto__:', obj.__proto__);
console.log('obj.__proto__ === Object.prototype:', obj.__proto__ === Object.prototype);

// Object prototype chain
console.log('\nPrototype Chain:');
console.log('obj ->', obj.__proto__); // Object.prototype
console.log('obj.__proto__.__proto__:', obj.__proto__.__proto__); // null

// Function constructor and prototype
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return 'Hello, ' + this.name;
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

console.log('\nPerson instances:');
console.log('person1.name:', person1.name);
console.log('person1.greet():', person1.greet());

console.log('\nPrototype relationships:');
console.log('person1.__proto__ === Person.prototype:', person1.__proto__ === Person.prototype);
console.log('Person.prototype.__proto__ === Object.prototype:', Person.prototype.__proto__ === Object.prototype);
console.log('Person.__proto__ === Function.prototype:', Person.__proto__ === Function.prototype);

// Prototype inheritance
console.log('\nPrototype inheritance check:');
console.log('person1 instanceof Person:', person1 instanceof Person);
console.log('person1 instanceof Object:', person1 instanceof Object);
console.log('Person instanceof Function:', Person instanceof Function);
console.log('Person instanceof Object:', Person instanceof Object);

🔍 Prototype Terminology

Key Concepts

[[Prototype]]: Internal property (accessed via __proto__)
.prototype: Property on functions
__proto__: Getter/setter for prototype (deprecated)
Object.getPrototypeOf(): Modern way to get prototype
Object.setPrototypeOf(): Modern way to set prototype

Prototype Chain Rules

Properties are looked up through the chain
Own properties shadow inherited ones
null is the end of every prototype chain
Functions have Function.prototype in their chain
Arrays have Array.prototype in their chain

Example 2: The Prototype Chain in Action

JavaScript Editor

// The Prototype Chain in Action

// Base object
const animal = {
  eats: true,
  walk() {
    console.log(this.name + ' walks');
  }
};

// Create rabbit that inherits from animal
const rabbit = {
  name: 'White Rabbit',
  jumps: true,
  __proto__: animal  // Sets prototype (modern way: Object.setPrototypeOf)
};

console.log('Rabbit properties:');
console.log('rabbit.name:', rabbit.name); // Own property
console.log('rabbit.jumps:', rabbit.jumps); // Own property
console.log('rabbit.eats:', rabbit.eats); // Inherited from animal
console.log('rabbit.walk:', rabbit.walk); // Inherited method

rabbit.walk(); // Method call using inherited method

// Property lookup in prototype chain
console.log('\nProperty lookup:');
console.log('rabbit.hasOwnProperty("name"):', rabbit.hasOwnProperty('name'));
console.log('rabbit.hasOwnProperty("eats"):', rabbit.hasOwnProperty('eats'));
console.log('rabbit.hasOwnProperty("walk"):', rabbit.hasOwnProperty('walk'));

// Shadowing properties
rabbit.walk = function() {
  console.log(this.name + ' hops quickly!');
};

console.log('\nAfter shadowing:');
rabbit.walk(); // Now uses own method
animal.walk(); // Original method unchanged

// Using Object.getPrototypeOf
console.log('\nUsing Object methods:');
console.log('Object.getPrototypeOf(rabbit) === animal:', Object.getPrototypeOf(rabbit) === animal);
console.log('Object.getPrototypeOf(animal) === Object.prototype:', Object.getPrototypeOf(animal) === Object.prototype);

// Looping through properties
console.log('\nfor...in loop (includes inherited):');
for (let prop in rabbit) {
  console.log(`${prop}: ${rabbit[prop]}`);
}

console.log('\nObject.keys (only own):');
console.log(Object.keys(rabbit));

✅ Best Practices

Use Object.getPrototypeOf() instead of __proto__
Define methods on prototype for memory efficiency
Use hasOwnProperty() to check own properties
Consider Object.create() for pure prototypal inheritance
Be careful with for...in (includes inherited properties)

❌ Common Mistakes

Modifying built-in prototypes (pollution)
Forgetting to set constructor property
Creating deep prototype chains (performance)
Using __proto__ in production code
Not understanding property shadowing

Example 3: Constructor Functions and Prototypes

JavaScript Editor

// Constructor Functions and Prototypes

// Constructor function
function Car(make, model, year) {
  // Instance properties
  this.make = make;
  this.model = model;
  this.year = year;
  
  // Instance method (created for each instance)
  this.getInfo = function() {
    return `${this.make} ${this.model} (${this.year})`;
  };
}

// Prototype method (shared across all instances)
Car.prototype.startEngine = function() {
  return `${this.make} ${this.model}'s engine started!`;
};

Car.prototype.stopEngine = function() {
  return `${this.make} ${this.model}'s engine stopped!`;
};

// Static method (on constructor itself)
Car.createTesla = function(model) {
  return new Car('Tesla', model, new Date().getFullYear());
};

// Creating instances
const car1 = new Car('Toyota', 'Camry', 2020);
const car2 = new Car('Honda', 'Civic', 2021);
const tesla = Car.createTesla('Model 3');

console.log('Car instances:');
console.log('car1.getInfo():', car1.getInfo());
console.log('car2.getInfo():', car2.getInfo());
console.log('tesla.getInfo():', tesla.getInfo());

console.log('\nPrototype methods:');
console.log('car1.startEngine():', car1.startEngine());
console.log('car2.startEngine():', car2.startEngine());

console.log('\nPrototype relationships:');
console.log('car1.__proto__ === Car.prototype:', car1.__proto__ === Car.prototype);
console.log('Car.prototype.__proto__ === Object.prototype:', Car.prototype.__proto__ === Object.prototype);
console.log('Car.__proto__ === Function.prototype:', Car.__proto__ === Function.prototype);

console.log('\nChecking instance vs prototype properties:');
console.log('car1.hasOwnProperty("make"):', car1.hasOwnProperty('make'));
console.log('car1.hasOwnProperty("startEngine"):', car1.hasOwnProperty('startEngine'));
console.log('Car.prototype.hasOwnProperty("startEngine"):', Car.prototype.hasOwnProperty('startEngine'));

// Modifying prototype affects all instances
Car.prototype.honk = function() {
  return 'Beep beep!';
};

console.log('\nAfter adding honk to prototype:');
console.log('car1.honk():', car1.honk());
console.log('car2.honk():', car2.honk());

// Instance overriding
car1.honk = function() {
  return 'Custom honk!';
};

console.log('\nAfter car1 overrides honk:');
console.log('car1.honk():', car1.honk()); // Uses own method
console.log('car2.honk():', car2.honk()); // Still uses prototype method

📊 Constructor vs Prototype Methods

Aspect	Constructor Methods	Prototype Methods
Memory Usage	❌ Each instance gets own copy	✅ Shared across instances
Performance	❌ Slower instantiation	✅ Faster instantiation
Access to Private Data	✅ Yes (closure)	❌ No
Dynamic Updates	❌ Only affects new instances	✅ Affects all instances
Use Case	Instance-specific logic	Shared behavior

Example 4: Advanced Prototype Operations

JavaScript Editor

// Advanced Prototype Operations

// 1. Object.create() for pure prototypal inheritance
const animalProto = {
  init(name) {
    this.name = name;
    return this;
  },
  eat() {
    return `${this.name} is eating`;
  },
  sleep() {
    return `${this.name} is sleeping`;
  }
};

// Create new object with specified prototype
const dog = Object.create(animalProto);
dog.init('Buddy');
dog.bark = function() {
  return `${this.name} says woof!`;
};

console.log('Pure prototypal inheritance:');
console.log('dog.eat():', dog.eat());
console.log('dog.bark():', dog.bark());
console.log('Object.getPrototypeOf(dog) === animalProto:', Object.getPrototypeOf(dog) === animalProto);

// 2. Prototype chain modification
function Shape(color) {
  this.color = color;
}

Shape.prototype.getArea = function() {
  return 0;
};

function Circle(radius, color) {
  Shape.call(this, color); // Call parent constructor
  this.radius = radius;
}

// Set up inheritance
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle; // Fix constructor reference

Circle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
};

Circle.prototype.getCircumference = function() {
  return 2 * Math.PI * this.radius;
};

const circle = new Circle(5, 'red');
console.log('\nClassical inheritance pattern:');
console.log('circle.color:', circle.color);
console.log('circle.getArea():', circle.getArea());
console.log('circle.getCircumference():', circle.getCircumference());
console.log('circle instanceof Circle:', circle instanceof Circle);
console.log('circle instanceof Shape:', circle instanceof Shape);

// 3. Mixins with prototypes
const canSwim = {
  swim() {
    return `${this.name} is swimming`;
  }
};

const canFly = {
  fly() {
    return `${this.name} is flying`;
  }
};

function Duck(name) {
  this.name = name;
}

// Mix in multiple prototypes
Object.assign(Duck.prototype, canSwim, canFly);

const donald = new Duck('Donald');
console.log('\nMultiple inheritance via mixins:');
console.log('donald.swim():', donald.swim());
console.log('donald.fly():', donald.fly());

// 4. Property descriptors in prototypes
Object.defineProperty(Duck.prototype, 'quack', {
  value: function() {
    return `${this.name} says quack!`;
  },
  writable: false, // Cannot be overwritten
  enumerable: true, // Shows up in for...in
  configurable: true // Can be deleted or reconfigured
});

console.log('\nProperty descriptors:');
console.log('donald.quack():', donald.quack());

// Try to overwrite (won't work due to writable: false)
donald.quack = function() { return 'New quack'; };
console.log('After trying to overwrite:', donald.quack());

🎯 Prototypal Inheritance Patterns

1. Classical Pattern

function Parent() {}
function Child() {
  Parent.call(this);
}
Child.prototype = Object.create(
  Parent.prototype
);
Child.prototype.constructor = Child;

2. Pure Prototypal

const parent = {
  method() { return 'hi'; }
};
const child = Object.create(parent);
child.otherMethod = function() {
  return 'hello';
};

3. Factory Pattern

function createPerson(name) {
  const person = Object.create(
    personMethods
  );
  person.name = name;
  return person;
}
const personMethods = {
  greet() { return 'Hi'; }
};

Example 5: Prototype Performance and Memory

JavaScript Editor

// Prototype Performance and Memory

// Bad: Methods defined in constructor (each instance gets own copy)
function BadCircle(radius) {
  this.radius = radius;
  this.getArea = function() {
    return Math.PI * this.radius * this.radius;
  };
  this.getCircumference = function() {
    return 2 * Math.PI * this.radius;
  };
}

// Good: Methods defined on prototype (shared across instances)
function GoodCircle(radius) {
  this.radius = radius;
}

GoodCircle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
};

GoodCircle.prototype.getCircumference = function() {
  return 2 * Math.PI * this.radius;
};

// Performance test
console.log('Creating 10000 instances...\n');

console.time('BadCircle');
const badCircles = [];
for (let i = 0; i < 10000; i++) {
  const circle = new BadCircle(i);
  badCircles.push(circle);
}
console.timeEnd('BadCircle');

console.time('GoodCircle');
const goodCircles = [];
for (let i = 0; i < 10000; i++) {
  const circle = new GoodCircle(i);
  goodCircles.push(circle);
}
console.timeEnd('GoodCircle');

console.log('\nMemory comparison:');
console.log('BadCircle instance size:', 
  JSON.stringify(new BadCircle(1)).length + ' chars');
console.log('GoodCircle instance size:', 
  JSON.stringify(new GoodCircle(1)).length + ' chars');

// Accessing prototype vs own properties
console.log('\nProperty access performance:');

const testObj = new GoodCircle(5);
const proto = GoodCircle.prototype;

console.time('Direct method call');
for (let i = 0; i < 1000000; i++) {
  testObj.getArea();
}
console.timeEnd('Direct method call');

console.time('Prototype method call');
for (let i = 0; i < 1000000; i++) {
  proto.getArea.call(testObj);
}
console.timeEnd('Prototype method call');

// Prototype chain lookup cost
function DeepChain() {
  this.value = 1;
}

let current = DeepChain.prototype;
for (let i = 0; i < 10; i++) {
  const parent = Object.create(current);
  parent['method' + i] = function() { return this.value + i; };
  current = parent;
}

DeepChain.prototype = current;
const deep = new DeepChain();

console.log('\nDeep prototype chain (10 levels):');
console.time('Deep chain access');
for (let i = 0; i < 100000; i++) {
  deep.method9();
}
console.timeEnd('Deep chain access');

Exercise: Implement Prototypal Inheritance

JavaScript Editor

// Implement the following using prototypal inheritance:

// 1. Create a Vehicle constructor with:
//    - make, model, year properties
//    - start() method (returns "Vehicle started")
//    - stop() method (returns "Vehicle stopped")

function Vehicle(make, model, year) {
  // Your code here
}

// 2. Create a Car constructor that inherits from Vehicle
//    - Add doors property
//    - Override start() to return "Car started"
//    - Add honk() method (returns "Beep beep!")

function Car(make, model, year, doors) {
  // Your code here (call parent constructor)
}

// Set up inheritance
// Your code here

// 3. Create an ElectricCar constructor that inherits from Car
//    - Add batteryCapacity property
//    - Override start() to return "Electric car started silently"
//    - Add charge() method (returns "Charging...")

function ElectricCar(make, model, year, doors, batteryCapacity) {
  // Your code here
}

// Set up inheritance
// Your code here

// 4. Test your implementation
const regularCar = new Car('Toyota', 'Camry', 2020, 4);
const tesla = new ElectricCar('Tesla', 'Model S', 2022, 4, 100);

console.log('Regular Car:');
console.log('Make:', regularCar.make);
console.log('Start:', regularCar.start());
console.log('Honk:', regularCar.honk());
console.log('Instance of Car?', regularCar instanceof Car);
console.log('Instance of Vehicle?', regularCar instanceof Vehicle);

console.log('\nElectric Car:');
console.log('Make:', tesla.make);
console.log('Battery:', tesla.batteryCapacity);
console.log('Start:', tesla.start());
console.log('Charge:', tesla.charge());
console.log('Instance of ElectricCar?', tesla instanceof ElectricCar);
console.log('Instance of Car?', tesla instanceof Car);
console.log('Instance of Vehicle?', tesla instanceof Vehicle);

// 5. Bonus: Add a static method to Vehicle
//    Vehicle.compareYears(vehicle1, vehicle2) 
//    Returns which vehicle is newer

// Your code here

console.log('\nBonus:');
console.log('Newer vehicle:', 
  Vehicle.compareYears(regularCar, tesla));

💡 Modern JavaScript and Prototypes

ES6 Classes (Syntactic Sugar)

// Class syntax (still uses prototypes)
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  start() {
    return 'Vehicle started';
  }
}

class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }
  
  honk() {
    return 'Beep beep!';
  }
}

// Under the hood: Still prototypes!
console.log(typeof Vehicle); // function
console.log(Vehicle.prototype.start); // function

When to Use Prototypes Directly

Library/framework development
Performance-critical code
Working with legacy code
Understanding JavaScript internals
Creating dynamic inheritance structures

🎯 Interview Questions on Prototypes

What's the difference between __proto__ and prototype?
How does property lookup work in prototype chain?
What happens when you modify Array.prototype?
How would you implement inheritance without classes?
What's the performance impact of deep prototype chains?
How do you check if a property is inherited or own?
What's the difference between Object.create() and new?
How do ES6 classes work with prototypes?
What's the constructor property and why is it important?
How would you implement multiple inheritance in JavaScript?

← Bind, Call & Apply (Polyfills)Prototype Inheritance →

JavaScript Tutorial

Prototypes (Deep Dive)

⚡ JavaScript's Prototypal Inheritance

Prototype Chain Visualization

Example 1: Understanding Prototypes

🔍 Prototype Terminology

Key Concepts

Prototype Chain Rules

Example 2: The Prototype Chain in Action

✅ Best Practices

❌ Common Mistakes

Example 3: Constructor Functions and Prototypes

📊 Constructor vs Prototype Methods

Example 4: Advanced Prototype Operations

🎯 Prototypal Inheritance Patterns

1. Classical Pattern

2. Pure Prototypal

3. Factory Pattern

Example 5: Prototype Performance and Memory

Exercise: Implement Prototypal Inheritance

💡 Modern JavaScript and Prototypes

ES6 Classes (Syntactic Sugar)

When to Use Prototypes Directly

🎯 Interview Questions on Prototypes

Follow Us

Our Tools

Our Company

Special Tools