JavaScript Prototypes and Prototype Chain: Mastering Inheritance in JavaScript

One of the most unique features of JavaScript is its inheritance model. Unlike many programming languages such as Java or C++, JavaScript does not use classical inheritance by default. Instead, it uses Prototype-Based Inheritance.

Almost every object in JavaScript is connected to another object called its prototype. This hidden connection allows objects to inherit properties and methods without copying them.

Understanding prototypes is essential because they are used internally by:

Arrays
Objects
Functions
Classes
DOM Elements
Built-in JavaScript Objects

In this article, we will learn:

What a Prototype is
Prototype-Based Inheritance
Prototype Chain
Constructor Functions
Prototype Methods
Object.create()
ES6 Classes and Prototypes
Practical Examples
Interview Questions

What is a Prototype?

A prototype is another object from which an object inherits properties and methods.

Think of a prototype as a template that provides common functionality to multiple objects.

Example:

let person =
{
    greet()
    {
        console.log("Hello");
    }
};

let student =
Object.create(person);

student.greet();

Output:

Hello

The student object does not contain the greet() method itself. It inherits it from its prototype.

Why Do We Need Prototypes?

Imagine creating 1,000 student objects.

Without prototypes:

Each Object

↓

Own Copy of greet()

↓

More Memory Used

With prototypes:

All Objects

↓

Share One greet()

↓

Less Memory Used

This makes JavaScript more memory-efficient.

Every Object Has a Prototype

Example:

let car =
{
    brand: "Toyota"
};

Internally:

car

↓

Prototype

↓

Object.prototype

Every normal object ultimately inherits from Object.prototype.

The Prototype Chain

When JavaScript looks for a property, it searches in the following order:

Current Object
Prototype
Prototype's Prototype
Until null

This sequence is called the Prototype Chain.

Prototype Chain Diagram

student

↓

person

↓

Object.prototype

↓

null

Example

let person =
{
    country: "India"
};

let student =
Object.create(person);

console.log(student.country);

Output:

India

JavaScript first searches student. Since country is not found, it searches person.

Property Lookup Process

Suppose we execute:

student.country;

JavaScript searches:

student

↓

person

↓

Object.prototype

↓

null

The search stops as soon as the property is found.

Constructor Functions

Before ES6 classes, constructor functions were used to create multiple objects.

Example:

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

let s1 =
new Student("Rahul");

console.log(s1.name);

Output:

Rahul

Adding Methods to a Prototype

Instead of creating a method inside every object:

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

Student.prototype.sayHello =
function()
{
    console.log(
    "Hello " + this.name
    );
};

let s1 =
new Student("Rahul");

s1.sayHello();

Output:

Hello Rahul

The method is shared by all Student objects.

Why Use Prototype Methods?

Without prototypes:

1,000 Objects

↓

1,000 Copies

↓

High Memory Usage

With prototypes:

1,000 Objects

↓

1 Shared Method

↓

Efficient Memory Usage

Object.create()

Object.create() creates a new object using another object as its prototype.

Example:

let animal =
{
    eat()
    {
        console.log("Eating...");
    }
};

let dog =
Object.create(animal);

dog.eat();

Output:

Eating...

Overriding Properties

Example:

let person =
{
    city: "Kolkata"
};

let student =
Object.create(person);

student.city = "Delhi";

console.log(student.city);

Output:

Delhi

The object's own property overrides the prototype property.

Prototype vs Own Property

Example:

let person =
{
    country: "India"
};

let student =
Object.create(person);

student.name = "Rahul";

Here:

student.name

↓

Own Property

while:

student.country

↓

Inherited Property

Checking Own Properties

JavaScript provides:

hasOwnProperty()

Example:

console.log(
student.hasOwnProperty("name")
);

Output:

true

Example:

console.log(
student.hasOwnProperty("country")
);

Output:

false

Built-in Prototype Example

Arrays inherit from Array.prototype.

Example:

let numbers =
[1,2,3];

console.log(
numbers.push
);

The push() method comes from Array.prototype.

Function Prototype

Functions also have prototypes.

Example:

function test()
{
}

console.log(
test.prototype
);

Output:

Prototype Object

ES6 Classes and Prototypes

Many developers think classes replace prototypes.

Actually:

ES6 Classes

↓

Use Prototypes Internally

Example:

class Student
{
    constructor(name)
    {
        this.name = name;
    }

    greet()
    {
        console.log(
        "Hello " + this.name
        );
    }
}

let s1 =
new Student("Rahul");

s1.greet();

Output:

Hello Rahul

The greet() method is stored on Student.prototype.

Prototype Chain with Classes

s1

↓

Student.prototype

↓

Object.prototype

↓

null

Real-World Example

Imagine a game.

Every player has:

Move
Jump
Attack

Instead of storing these methods inside every player:

Player Object

↓

Player Prototype

↓

Shared Methods

This saves memory and improves performance.

Common Mistakes

Adding Methods Inside Constructor

Wrong:

function Student(name)
{
    this.name = name;

    this.greet =
    function()
    {
        console.log("Hello");
    };
}

Every object gets its own copy.

Correct Approach

Student.prototype.greet =
function()
{
    console.log("Hello");
};

One shared method.

Practical Example

function Car(brand)
{
    this.brand = brand;
}

Car.prototype.show =
function()
{
    console.log(
    this.brand
    );
};

let car1 =
new Car("Toyota");

let car2 =
new Car("Honda");

car1.show();

car2.show();

Output:

Toyota

Honda

Prototype Chain Summary

Current Object

↓

Prototype

↓

Object.prototype

↓

null

JavaScript searches in this order whenever a property or method is accessed.

Advantages of Prototypes

Memory Efficient
Supports Inheritance
Faster Object Creation
Shared Methods
Reusable Code

Interview Questions