Prototype – The Backbone of JavaScript Objects

JavaScript looks simple on the surface, but one concept powers almost everything behind the scenes:

👉 Prototype

If you understand prototypes:

• Objects make sense

• Inheritance becomes clear

• JavaScript feels logical, not magical ✨

In this blog, we’ll cover:

• What prototypes are (with a simple analogy)

• The prototype chain

• How inheritance works in JavaScript

• Object.create(), __proto__, and prototype

• Do’s and Don’ts of modifying prototypes

No confusion. Step by step clarity 👇

1️⃣ What is a Prototype in JavaScript?

Simple Definition:

A prototype is an object from which other objects can inherit properties and methods.

Real-Life Analogy 🏠 (Blueprint Example)

Think of a house blueprint:

• Blueprint defines rooms, doors, windows

• Many houses are built from one blueprint

👉 Prototype = blueprint
👉 Objects = houses built from it

If you add something to the blueprint, all houses get it.

2️⃣ JavaScript Objects & Prototypes

In JavaScript:

• Every object has a hidden reference to another object

• This reference is called its prototype

const user = {
  name: "Arjun"
};

👉 user automatically links to a prototype object.

3️⃣ The Prototype Chain (Very Important)

When you access a property:

user.toString();

JavaScript looks for it in this order:

1. On user

2. On user’s prototype

3. On prototype’s prototype

4. Until it reaches null

This lookup path is called the prototype chain.

🌳 Prototype Chain Diagram

Example Chain:

user → Object.prototype → null

4️⃣ Practical Example of Prototype-Based Inheritance

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

const student = Object.create(person);
student.name = "Arjun";

student.greet(); // Hello!

What’s Happening?

• student does not have greet

• JavaScript finds it in person

• Inheritance works via prototype chain

5️⃣ Understanding Object.create()

What does it do?

Creates a new object and links it to a prototype.

const car = {
  drive() {
    console.log("Driving");
  }
};

const myCar = Object.create(car);
myCar.drive();

✔ Clean
✔ Explicit
✔ Recommended for prototype-based inheritance

6️⃣ __proto__ vs prototype vs Object.create()

This confuses many beginners — let’s simplify.

__proto__ (Internal Link)

myCar.__proto__ === car; // true

• Points to the object's prototype

• Exists on instances

⚠️ Avoid using directly in production

prototype (Constructor Property)

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

User.prototype.sayHi = function () {
  console.log("Hi");
};

• Exists on constructor functions

• Used when creating objects with new

Comparison Table

7️⃣ Constructor Functions & Prototypes

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

Person.prototype.introduce = function () {
  console.log(`I am ${this.name}`);
};

const p1 = new Person("Arjun");
p1.introduce();

✔ Method shared across all instances
✔ Memory efficient

8️⃣ Classical vs Prototype-Based Inheritance

👉 JavaScript uses objects inheriting from objects

9️⃣ Modifying Prototypes – Do’s and Don’ts

✅ Do (Safe & Controlled)

function User() {}

User.prototype.login = function () {
  console.log("Logged in");
};

✔ Add shared methods
✔ Improves memory usage

❌ Don’t (Very Important)

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

❌ Can break libraries
❌ Unexpected behavior

👉 Never modify built-in prototypes (Array, Object, etc.)