Advance JavaScript (DOM, BOM, Web API) / Object Oriented Programming

[[prototype]]vs .prototype

💡__proto__ and [[prototype]] is same

JavaScript has two different prototype concepts:

  1. [[Prototype]] (internal hidden link)

  2. .prototype (property on functions)

These are NOT the same.

They work together, but serve different purposes.

Let’s break them down cleanly.

🟦 1. [[Prototype]] — Hidden internal link

Every object in JavaScript has a hidden property called [[Prototype]].

✔ What it is:

  • A hidden reference to another object.

  • Used for inheritance.

  • Accessed in code via __proto__ (old) or Object.getPrototypeOf() (modern).

  • Creates the prototype chain.

✔ Example:

const animal = { eats: true };
const rabbit = { jumps: true };

Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.eats);  // inherited

✔ Key point:

[[Prototype]] belongs to objects (including arrays, functions, everything).

🟦 2. prototype — A property ONLY on functions

This one exists only on functions (because they may be used as constructors).

✔ What it is:

  • An object that will become the [[Prototype]] of all instances created using new.

✔ Example:

function Car(model) {
  this.model = model;
}
Car.prototype.start = function() {
  console.log("Starting...");
};
const c1 = new Car("BMW");

Internally:

c1.[[Prototype]] === Car.prototype

✔ Key point:

.prototype belongs to functions, not objects.

🎯 Summary Table

Feature

[[Prototype]]

prototype

What is it?

Hidden internal link

A normal property

Belongs to?

All objects

Only functions

Used for?

Inheriting properties

Setting prototype for instances of a function

How to access?

obj.__proto__ or Object.getPrototypeOf(obj)

Func.prototype

Affects?

Only the object itself

Objects created with new Func()

🟩 Perfect Analogy

🔹 prototype = Blueprint

A function's .prototype is a blueprint for objects created using new.

🔹 [[Prototype]] = Pointer

Each object stores a pointer ([[Prototype]]) to the blueprint it follows.

🟧 The Two Are Connected Like This

When you do:

let c1 = new Car("BMW");

JavaScript automatically sets:

c1.[[Prototype]] = Car.prototype

✔ That's why .start() is found on the prototype

✔ Even though it's not inside c1

🟦 Extra Clarification for Property Descriptors

jumps: { value: true } gets stored in rabbit object itself, not prototype

Because:

Object.create(animal, {
  jumps: { value: true }
});

👉 descriptors always create own properties on the object you're creating

👉 not inside the prototype