← Prototypes (Deep)Classes vs Prototypes →

Prototype Inheritance

🎯 JavaScript's Inheritance Model

JavaScript uses prototypal inheritance where objects inherit directly from other objects. This is more flexible than classical inheritance and enables patterns like mixins and composition.

Inheritance Patterns Comparison

Classical Inheritance

Parent → Child relationships

Clear hierarchy
Good for is-a relationships
Can be rigid

Prototypal Inheritance

Object → Object delegation

More flexible
Dynamic inheritance
Less boilerplate

Composition

Has-a relationships

Most flexible
No inheritance issues
Easier to test

Example 1: Classical Inheritance Pattern

JavaScript Editor

// Classical Inheritance Pattern

// Parent constructor
function Animal(name) {
  this.name = name;
  this.energy = 100;
}

// Parent prototype methods
Animal.prototype.eat = function(amount) {
  console.log(`${this.name} is eating.`);
  this.energy += amount;
  return this;
};

Animal.prototype.sleep = function(length) {
  console.log(`${this.name} is sleeping.`);
  this.energy += length;
  return this;
};

Animal.prototype.play = function(length) {
  console.log(`${this.name} is playing.`);
  this.energy -= length;
  return this;
};

// Child constructor
function Dog(name, breed) {
  // Call parent constructor with current context
  Animal.call(this, name);
  this.breed = breed;
}

// Set up inheritance: Dog.prototype inherits from Animal.prototype
Dog.prototype = Object.create(Animal.prototype);

// Fix constructor property (otherwise it would be Animal)
Dog.prototype.constructor = Dog;

// Child-specific methods
Dog.prototype.bark = function() {
  console.log(`${this.name} says Woof!`);
  this.energy -= 0.1;
  return this;
};

Dog.prototype.fetch = function() {
  console.log(`${this.name} is fetching the ball!`);
  this.energy -= 5;
  return this;
};

// Override parent method
Dog.prototype.eat = function(amount) {
  // Call parent method
  Animal.prototype.eat.call(this, amount);
  console.log(`${this.name} eats like a dog!`);
  return this;
};

// Create instances
const dog1 = new Dog('Buddy', 'Golden Retriever');
const dog2 = new Dog('Max', 'German Shepherd');

console.log('Dog instances:');
console.log('dog1.name:', dog1.name);
console.log('dog1.breed:', dog1.breed);
console.log('dog1.energy:', dog1.energy);

console.log('\nMethod calls:');
dog1.bark().eat(10).play(5);
console.log('Energy after activities:', dog1.energy);

console.log('\nInheritance checks:');
console.log('dog1 instanceof Dog:', dog1 instanceof Dog);
console.log('dog1 instanceof Animal:', dog1 instanceof Animal);
console.log('dog1 instanceof Object:', dog1 instanceof Object);

console.log('\nPrototype chain:');
console.log('Dog.prototype.isPrototypeOf(dog1):', Dog.prototype.isPrototypeOf(dog1));
console.log('Animal.prototype.isPrototypeOf(dog1):', Animal.prototype.isPrototypeOf(dog1));
console.log('Object.prototype.isPrototypeOf(dog1):', Object.prototype.isPrototypeOf(dog1));

🔧 Inheritance Setup Steps

Step 1: Call Parent Constructor

function Child() {
  // Pass current context to parent
  Parent.call(this);
  // Child-specific initialization
}

Step 2: Set Up Prototype Chain

// Link prototypes
Child.prototype = Object.create(
  Parent.prototype
);

// Fix constructor reference
Child.prototype.constructor = Child;

Step 3: Add Child Methods

Child.prototype.childMethod = function() {
  // Child-specific logic
};

Step 4: Override Parent Methods

Child.prototype.parentMethod = function() {
  // Call parent version if needed
  Parent.prototype.parentMethod.call(this);
  // Child-specific logic
};

Example 2: Multiple Levels of Inheritance

JavaScript Editor

// Multiple Levels of Inheritance

// Level 1: Vehicle
function Vehicle(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.speed = 0;
}

Vehicle.prototype.accelerate = function(increment = 10) {
  this.speed += increment;
  console.log(`${this.make} ${this.model}加速到${this.speed}km/h`);
  return this;
};

Vehicle.prototype.brake = function(decrement = 10) {
  this.speed = Math.max(0, this.speed - decrement);
  console.log(`${this.make} ${this.model}减速到${this.speed}km/h`);
  return this;
};

// Level 2: Car (inherits from Vehicle)
function Car(make, model, year, doors) {
  Vehicle.call(this, make, model, year);
  this.doors = doors;
  this.fuel = 100;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.refuel = function(amount) {
  this.fuel = Math.min(100, this.fuel + amount);
  console.log(`加油${amount}%，当前油量：${this.fuel}%`);
  return this;
};

Car.prototype.drive = function(distance) {
  const fuelUsed = distance * 0.1;
  if (this.fuel >= fuelUsed) {
    this.fuel -= fuelUsed;
    console.log(`行驶了${distance}公里，油量剩余：${this.fuel}%`);
  } else {
    console.log('油量不足！');
  }
  return this;
};

// Level 3: ElectricCar (inherits from Car)
function ElectricCar(make, model, year, doors, batteryCapacity) {
  Car.call(this, make, model, year, doors);
  this.batteryCapacity = batteryCapacity;
  this.battery = 100;
}

ElectricCar.prototype = Object.create(Car.prototype);
ElectricCar.prototype.constructor = ElectricCar;

// Override refuel method
ElectricCar.prototype.refuel = function(amount) {
  this.battery = Math.min(100, this.battery + amount);
  console.log(`充电${amount}%，当前电量：${this.battery}%`);
  return this;
};

// Override drive method
ElectricCar.prototype.drive = function(distance) {
  const batteryUsed = distance * 0.05; // More efficient
  if (this.battery >= batteryUsed) {
    this.battery -= batteryUsed;
    console.log(`电动行驶${distance}公里，电量剩余：${this.battery}%`);
  } else {
    console.log('电量不足！');
  }
  return this;
};

// Electric car specific method
ElectricCar.prototype.regenerateBrake = function() {
  this.battery = Math.min(100, this.battery + 5);
  console.log(`再生制动充电，电量：${this.battery}%`);
  return this;
};

// Test the inheritance chain
const tesla = new ElectricCar('Tesla', 'Model S', 2023, 4, 100);
const honda = new Car('Honda', 'Civic', 2022, 4);

console.log('Tesla (ElectricCar):');
console.log('Make:', tesla.make);
console.log('Battery:', tesla.batteryCapacity);
console.log('Doors:', tesla.doors);

console.log('\nMethod calls - Tesla:');
tesla.accelerate(20).drive(50).regenerateBrake().brake(10);

console.log('\nHonda (Car):');
console.log('Make:', honda.make);
console.log('Fuel:', honda.fuel);

console.log('\nMethod calls - Honda:');
honda.accelerate(15).drive(30).refuel(20).brake(5);

console.log('\nInstance checks:');
console.log('tesla instanceof ElectricCar:', tesla instanceof ElectricCar);
console.log('tesla instanceof Car:', tesla instanceof Car);
console.log('tesla instanceof Vehicle:', tesla instanceof Vehicle);
console.log('tesla instanceof Object:', tesla instanceof Object);

console.log('\nPrototype chain length:');
let proto = Object.getPrototypeOf(tesla);
let depth = 0;
while (proto) {
  console.log(`Level ${depth}: `, proto.constructor.name);
  proto = Object.getPrototypeOf(proto);
  depth++;
}

⚠️ The Fragile Base Class Problem

Deep inheritance chains can create fragile code where changes to base classes break derived classes. This is why composition is often preferred over deep inheritance.

Base class changes affect all derived classes
Difficult to understand the full hierarchy
Performance degrades with deep chains
Tight coupling between classes

Example 3: Mixins and Composition vs Inheritance

JavaScript Editor

// Mixins and Composition vs Inheritance

// Problems with deep inheritance chains
// 1. Fragile base class problem
// 2. Tight coupling
// 3. Difficult to change
// 4. Multiple inheritance not supported

// Solution: Composition with Mixins

// Base object
const canEat = {
  eat(food) {
    console.log(`${this.name} eats ${food}`);
    this.energy += 10;
    return this;
  }
};

const canSleep = {
  sleep(hours) {
    console.log(`${this.name} sleeps for ${hours} hours`);
    this.energy += hours * 5;
    return this;
  }
};

const canWalk = {
  walk() {
    console.log(`${this.name} walks`);
    this.energy -= 5;
    return this;
  }
};

const canSwim = {
  swim() {
    console.log(`${this.name} swims`);
    this.energy -= 10;
    return this;
  }
};

const canFly = {
  fly() {
    console.log(`${this.name} flies`);
    this.energy -= 20;
    return this;
  }
};

// Mixin helper function
function mixin(target, ...sources) {
  Object.assign(target, ...sources);
  return target;
}

// Factory function using composition
function createAnimal(name) {
  const animal = {
    name,
    energy: 100,
    
    // Default behaviors
    ...canEat,
    ...canSleep
  };
  
  return animal;
}

// Create specific animals with different capabilities
const dog = mixin(createAnimal('Dog'), canWalk, {
  bark() {
    console.log(`${this.name} barks!`);
    return this;
  }
});

const duck = mixin(createAnimal('Duck'), canWalk, canSwim, canFly, {
  quack() {
    console.log(`${this.name} quacks!`);
    return this;
  }
});

const fish = mixin(createAnimal('Fish'), canSwim, {
  bubble() {
    console.log(`${this.name} blows bubbles`);
    return this;
  }
});

console.log('Composition with Mixins:');
console.log('\nDog:');
dog.eat('bone').walk().bark().sleep(8);
console.log('Energy:', dog.energy);

console.log('\nDuck:');
duck.eat('bread').walk().swim().fly().quack();
console.log('Energy:', duck.energy);

console.log('\nFish:');
fish.eat('algae').swim().bubble();
console.log('Energy:', fish.energy);

// Advantages of composition:
// 1. Flexible: Easy to add/remove behaviors
// 2. No inheritance chain issues
// 3. No fragile base class problem
// 4. Supports multiple "inheritance"

// Class-based mixins (ES6+)
class AnimalBase {
  constructor(name) {
    this.name = name;
    this.energy = 100;
  }
}

// Apply mixins to class
const Swimming = Base => class extends Base {
  swim() {
    console.log(`${this.name} swims`);
    this.energy -= 10;
    return this;
  }
};

const Flying = Base => class extends Base {
  fly() {
    console.log(`${this.name} flies`);
    this.energy -= 20;
    return this;
  }
};

class SuperDuck extends Flying(Swimming(AnimalBase)) {
  quack() {
    console.log(`${this.name} quacks!`);
    return this;
  }
}

const superDuck = new SuperDuck('Super Duck');
console.log('\nClass-based mixins:');
superDuck.swim().fly().quack();

📊 Inheritance vs Composition

Factor	Inheritance	Composition
Relationship	IS-A (Dog is an Animal)	HAS-A (Dog has eating behavior)
Flexibility	❌ Fixed at compile time	✅ Dynamic at runtime
Coupling	❌ Tight (depends on parent)	✅ Loose (independent)
Reusability	⚠️ Through hierarchy	✅ Through mixing
Testing	❌ Requires parent setup	✅ Independent testing
Use Case	Clear hierarchical domains	Behavior-based systems

Example 4: Prototype Chain Optimization

JavaScript Editor

// Prototype Chain Optimization

// Problem: Long prototype chains hurt performance
function Level1() { this.a = 1; }
function Level2() { Level1.call(this); this.b = 2; }
function Level3() { Level2.call(this); this.c = 3; }
function Level4() { Level3.call(this); this.d = 4; }
function Level5() { Level4.call(this); this.e = 5; }

// Setup deep inheritance
Level2.prototype = Object.create(Level1.prototype);
Level3.prototype = Object.create(Level2.prototype);
Level4.prototype = Object.create(Level3.prototype);
Level5.prototype = Object.create(Level4.prototype);

const deepObj = new Level5();

// Performance test
console.time('Deep chain property access');
for (let i = 0; i < 1000000; i++) {
  // Has to walk 5 levels up the chain
  const test = deepObj.a + deepObj.b + deepObj.c + deepObj.d + deepObj.e;
}
console.timeEnd('Deep chain property access');

// Solution 1: Flatten prototype chain
function Flattened() {
  this.a = 1;
  this.b = 2;
  this.c = 3;
  this.d = 4;
  this.e = 5;
}

const flatObj = new Flattened();

console.time('Flat object property access');
for (let i = 0; i < 1000000; i++) {
  const test = flatObj.a + flatObj.b + flatObj.c + flatObj.d + flatObj.e;
}
console.timeEnd('Flat object property access');

// Solution 2: Copy methods to instance (closure)
function Optimized() {
  this.a = 1;
  this.b = 2;
  this.c = 3;
  this.d = 4;
  this.e = 5;
  
  // Copy methods to instance (if few methods)
  this.method1 = function() { return this.a; };
  this.method2 = function() { return this.b; };
  this.method3 = function() { return this.c; };
}

const optObj = new Optimized();

console.time('Optimized method calls');
for (let i = 0; i < 1000000; i++) {
  const test = optObj.method1() + optObj.method2() + optObj.method3();
}
console.timeEnd('Optimized method calls');

// Solution 3: Use composition instead of inheritance
const behavior1 = {
  method1() { return this.a; }
};

const behavior2 = {
  method2() { return this.b; }
};

const behavior3 = {
  method3() { return this.c; }
};

function Composed() {
  this.a = 1;
  this.b = 2;
  this.c = 3;
  
  // Directly assign methods
  Object.assign(this, behavior1, behavior2, behavior3);
}

const composedObj = new Composed();

console.time('Composed method calls');
for (let i = 0; i < 1000000; i++) {
  const test = composedObj.method1() + composedObj.method2() + composedObj.method3();
}
console.timeEnd('Composed method calls');

// Solution 4: Use ES6 classes (V8 optimized)
class ES6Class {
  constructor() {
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
    this.e = 5;
  }
  
  method1() { return this.a; }
  method2() { return this.b; }
  method3() { return this.c; }
}

const es6Obj = new ES6Class();

console.time('ES6 class method calls');
for (let i = 0; i < 1000000; i++) {
  const test = es6Obj.method1() + es6Obj.method2() + es6Obj.method3();
}
console.timeEnd('ES6 class method calls');

console.log('\nPerformance comparison complete.');
console.log('Best to worst: ES6 Classes > Composition > Flattened > Deep Chain');

Exercise: Choose the Right Pattern

JavaScript Editor

// Problem: Design a system for different types of employees
// Requirements:
// 1. All employees have: name, id, department
// 2. All employees can: work(), takeBreak()
// 3. Managers can: conductMeeting(), approveExpense()
// 4. Developers can: writeCode(), debug()
// 5. Some developers are also team leads (can: assignTask())
// 6. Some managers are also project managers (can: createProject())

// Task 1: Implement using classical inheritance
// Task 2: Implement using composition/mixins
// Task 3: Compare the approaches

// Classical Inheritance Approach
function Employee(name, id, department) {
  // Your code here
}

// Manager inherits from Employee
function Manager(name, id, department, teamSize) {
  // Your code here
}

// Developer inherits from Employee
function Developer(name, id, department, skills) {
  // Your code here
}

// TeamLead inherits from Developer
function TeamLead(name, id, department, skills, teamMembers) {
  // Your code here
}

// ProjectManager inherits from Manager
function ProjectManager(name, id, department, teamSize, projects) {
  // Your code here
}

// Composition Approach
const workBehavior = {
  work() {
    console.log(`${this.name} is working`);
  }
};

const breakBehavior = {
  takeBreak() {
    console.log(`${this.name} is on break`);
  }
};

const meetingBehavior = {
  conductMeeting() {
    console.log(`${this.name} is conducting a meeting`);
  }
};

// Create employee using composition
function createEmployee(name, id, department, behaviors = []) {
  const employee = {
    name,
    id,
    department
  };
  
  // Your composition logic here
  
  return employee;
}

// Test both approaches
console.log('=== Classical Inheritance ===');
const manager = new Manager('Alice', 1, 'Engineering', 5);
manager.work();
// Your test code here

console.log('\n=== Composition ===');
const composedManager = createEmployee('Bob', 2, 'Sales', [
  workBehavior, 
  breakBehavior, 
  meetingBehavior
]);
// Your test code here

// Questions to consider:
// 1. Which approach is easier to extend?
// 2. Which has better performance?
// 3. Which is more maintainable?
// 4. How would you add a new role (like "Intern")?
// 5. What if an employee needs multiple roles?

💡 Best Practices for JavaScript Inheritance

Prefer composition over inheritance when possible
Use ES6 classes for cleaner syntax (they still use prototypes)
Keep inheritance chains shallow (max 2-3 levels)
Use mixins for cross-cutting concerns
Consider factory functions for complex object creation
Avoid modifying built-in prototypes in production code
Use Object.create(null) for dictionary objects
Be mindful of performance with deep prototype chains

🎯 Interview Questions on Prototype Inheritance

What's the difference between classical and prototypal inheritance?
How would you implement multiple inheritance in JavaScript?
What are the advantages of composition over inheritance?
How do you properly set up inheritance in JavaScript?
What's the fragile base class problem?
How do ES6 classes differ from constructor functions?
What are mixins and when would you use them?
How does JavaScript's prototype chain affect performance?
What's the difference between Object.create() and new?
How would you implement private properties in JavaScript classes?

← Prototypes (Deep)Classes vs Prototypes →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Prototype Inheritance

🎯 JavaScript's Inheritance Model

Inheritance Patterns Comparison

Classical Inheritance

Prototypal Inheritance

Composition

Example 1: Classical Inheritance Pattern

🔧 Inheritance Setup Steps

Step 1: Call Parent Constructor

Step 2: Set Up Prototype Chain

Step 3: Add Child Methods

Step 4: Override Parent Methods

Example 2: Multiple Levels of Inheritance

⚠️ The Fragile Base Class Problem

Example 3: Mixins and Composition vs Inheritance

📊 Inheritance vs Composition

Example 4: Prototype Chain Optimization

Exercise: Choose the Right Pattern

💡 Best Practices for JavaScript Inheritance

🎯 Interview Questions on Prototype Inheritance

Follow Us

Our Tools

Our Company

Special Tools