JavaScript Prototypal Inheritance

JavaScript uses Prototypal Inheritance instead of Classical Inheritance.

Unlike Java or C#:

Java -> Class-Based Inheritance

JavaScript -> Prototype-Based Inheritance

Every object in JavaScript can inherit properties and methods from another object.

What is Prototypal Inheritance?

Prototypal Inheritance is a mechanism where one object can access properties and methods from another object through the prototype chain.

Child Object
      |
      v
Parent Object
      |
      v
Object.prototype
      |
      v
null
Why Do We Need It?

Without inheritance:

const dog = {
    eat() {
        console.log("Eating");
    }
};

const cat = {
    eat() {
        console.log("Eating");
    }
};

Problem:

Duplicate Code
More Memory Usage
Hard Maintenance

Solution:

Share Common Behavior Through Prototype
Real World Example
Animal
 |
 +-- eat()
 |
 +-- sleep()

Dog
 |
 +-- bark()

Cat
 |
 +-- meow()

Dog and Cat inherit common Animal behavior.

How Inheritance Works

JavaScript searches properties in this order:

Current Object
      |
      v
Prototype
      |
      v
Parent Prototype
      |
      v
null

This process is called:

Prototype Chain Lookup
Using Object.create()

The simplest way to create inheritance.

Parent Object:

const animal = {

    eat() {
        console.log("Eating");
    }

};

Child Object:

const dog =
Object.create(animal);

dog.bark = function() {
    console.log("Barking");
};

Usage:

dog.eat();
dog.bark();

Output:

Eating
Barking
Inheritance Diagram
dog
 |
 v
animal
 |
 v
Object.prototype
 |
 v
null
Property Lookup Example
const animal = {
    type: "Animal"
};

const dog =
Object.create(animal);

console.log(dog.type);

Output:

Animal

Search Flow:

dog
 |
Not Found
 |
 v
animal
 |
Found ✔
Method Inheritance Example
const person = {

    greet() {
        console.log("Hello");
    }

};

const employee =
Object.create(person);

employee.greet();

Output:

Hello
Constructor Function Inheritance

Before ES6 Classes, inheritance was implemented using constructor functions.

Parent:

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

Method:

Animal.prototype.eat =
function() {

    console.log(
        `${this.name} is eating`
    );

};
Child Constructor
function Dog(name) {

    Animal.call(this, name);

}

Inheritance:

Dog.prototype =
Object.create(
    Animal.prototype
);
Usage
const dog =
new Dog("Tommy");

dog.eat();

Output:

Tommy is eating
Constructor Inheritance Diagram
dog
 |
 v
Dog.prototype
 |
 v
Animal.prototype
 |
 v
Object.prototype
 |
 v
null
Method Overriding

Child can override parent methods.

Parent:

const animal = {

    speak() {
        console.log("Animal Sound");
    }

};

Child:

const dog =
Object.create(animal);

dog.speak = function() {

    console.log("Bark");

};

Usage:

dog.speak();

Output:

Bark
Method Lookup Flow
dog
 |
speak() Found ✔

Stop Searching

Parent method is ignored.

ES6 Class Inheritance

Modern syntax:

class Animal {

    eat() {
        console.log("Eating");
    }

}

Child:

class Dog
extends Animal {

    bark() {
        console.log("Barking");
    }

}

Usage:

const dog =
new Dog();

dog.eat();
dog.bark();

Output:

Eating
Barking
Important Note

Even with classes:

JavaScript Still Uses Prototypes
Internally

Classes are:

Syntactic Sugar
Over Prototype Inheritance
super Keyword

Call parent method.

class Animal {

    speak() {
        console.log("Animal");
    }

}

Child:

class Dog
extends Animal {

    speak() {

        super.speak();

        console.log("Dog");

    }

}

Output:

Animal
Dog
Real World Example

Employee System

class Person {

    getName() {
        return this.name;
    }

}

Employee:

class Employee
extends Person {

    getRole() {
        return "Developer";
    }

}

Employee inherits:

getName()

from Person.

Benefits of Prototypal Inheritance
Code Reuse
Share Methods
Across Objects
Memory Efficiency
Single Method Copy
Shared By All Objects
Easy Extension
Add New Behavior
Without Duplicating Code
Common Mistakes
Modifying Built-in Prototypes

Avoid:

Array.prototype.custom =
function(){};

Can break applications.

Deep Inheritance Chains

Bad:

A
 |
 B
 |
 C
 |
 D
 |
 E

Hard to maintain.

Confusing Prototype and Object
Object -> Instance

Prototype -> Shared Parent
Best Practices
Prefer composition over deep inheritance.
Keep inheritance hierarchy simple.
Use ES6 classes for readability.
Use Object.create() to understand fundamentals.
Avoid modifying built-in prototypes.
Interview Questions
What is Prototypal Inheritance?

A mechanism where objects inherit properties and methods from other objects through the prototype chain.

How is JavaScript Different from Java?
Java -> Class-Based

JavaScript -> Prototype-Based
What is Object.create()?

Creates a new object with a specified prototype.

What is Method Overriding?

Child object providing its own implementation of a parent method.

Are ES6 Classes Real Classes?

No.

They are syntactic sugar over prototypes.

What is the Difference Between Inheritance and Prototype Chain?
Inheritance
-----------
Relationship

Prototype Chain
---------------
Lookup Mechanism
Cheat Sheet
Prototypal Inheritance
----------------------
Object Inherits
From Another Object

Important APIs
--------------
Object.create()

Keywords
--------
extends
super

Lookup Flow
-----------
Object
 |
Prototype
 |
Parent Prototype
 |
null

Benefits
--------
Code Reuse
Memory Efficiency
Maintainability

Modern Syntax
-------------
ES6 Classes
Summary

Prototypal Inheritance is the foundation of JavaScript's object system.

Key Concepts:

Prototype Chain
Object.create()
Property Lookup
Method Inheritance
Method Overriding
Constructor Function Inheritance
ES6 Class Inheritance

Understanding Prototypal Inheritance is essential before learning:

Advanced OOP
Design Patterns
React Internals
JavaScript Engine Internals
TypeScript Classes