JavaScript Prototypes & Inheritance

Understand how objects share methods, how the prototype chain looks up properties, and why prototypes save memory.

1. What is a Prototype?

In JavaScript, every object has a hidden link to a parent object called its prototype. If you ask an object for a property or method it doesn't have, JavaScript automatically asks its prototype!

💡 Think of a Family Recipe Book

If someone asks you for a recipe you don't know, you don't panic — you check your parents' recipe book (your prototype). If they don't have it, they check the grandparents' book. If nobody in your family has it, you finally say "Sorry, undefined!" 

const animal = {
    eats: true,
    sleep() {
        return "Sleeping... zzz";
    }
};

// Create a new object that inherits from 'animal':
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.barks); // true (Found on dog itself)
console.log(dog.eats);  // true (Inherited from animal prototype!)
console.log(dog.sleep()); // "Sleeping... zzz" (Inherited from animal!)
Output
true
true
Sleeping... zzz

2. `prototype` vs `__proto__` (The Key Difference)

These two look similar, but they serve two distinct roles:

1. `Function.prototype` (The Blueprint)

Attached only to functions / constructor blueprints. It defines what methods all newly created instances will inherit.

2. `instance.__proto__` (The Live Link)

The actual hidden link on every individual object pointing to its parent prototype. (Modern JS uses Object.getPrototypeOf(obj)).

3. Why Prototypes Matter: Memory Efficiency

If you put methods inside a constructor function, every single object creates a brand new copy of that function. Putting methods on the prototype shares one single function across 10,000 objects! 

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

// Attach method to User.prototype — created ONCE in memory:
User.prototype.greet = function() {
    return `Hi, I am ${this.name} (${this.role})`;
};

const user1 = new User("Alex", "Engineer");
const user2 = new User("Priya", "Designer");

console.log(user1.greet()); // "Hi, I am Alex (Engineer)"
console.log(user2.greet()); // "Hi, I am Priya (Designer)"

// Both users share the exact SAME function in memory!
console.log(user1.greet === user2.greet); // true (Super fast & lightweight!)
Output
Hi, I am Alex (Engineer)
Hi, I am Priya (Designer)
true

4. The Prototype Chain & `Object.create(null)`

Every object in JavaScript eventually inherits from Object.prototype. The very top of the chain points to null:

💡 Creating Pure Dictionary Objects (No Prototypes)

If you want a pure key-value store that has zero inherited methods or prototype pollution risks, use Object.create(null). 

const cleanMap = Object.create(null);
cleanMap["secretKey"] = "ABC_123";

console.log(cleanMap.secretKey); // "ABC_123"
console.log(cleanMap.toString);  // undefined (No prototype methods inherited!)
Output
ABC_123
undefined

5. Quick Prototype Summary

Tool / Method What it Does Example
Object.create(proto) Creates a new object linking directly to proto const child = Object.create(parent)
Object.getPrototypeOf(obj) Returns the prototype object of obj Object.getPrototypeOf(user)
Object.hasOwn(obj, key) Checks if property belongs to object itself (not prototype) Object.hasOwn(user, "name")
obj instanceof Constructor Checks if Constructor's prototype exists in obj chain user1 instanceof User // true

6. Prototypes Interview Deck

Test your knowledge on property shadowing, prototype method sharing, the prototype chain termination, and Object.create:

🎯 Prototypes Interview Deck
Question 1 of 5
⭐ Easy • Memory Sharing Prototype Methods 
function Dev(name) {
    this.name = name;
}
Dev.prototype.code = function() {
    return "coding...";
};

const dev1 = new Dev("Sam");
const dev2 = new Dev("Alex");

console.log(dev1.code === dev2.code);
What will be logged to the console?
A) true
B) false
C) undefined
D) TypeError
⚡ Medium • Property Shadowing Prototype Shadowing 
const parent = { x: 20 };
const child = Object.create(parent);

child.x = 99;

console.log(child.x, parent.x);
What will be logged to the console?
A) 99 20
B) 99 99
C) 20 20
D) 99 undefined
⭐ Easy • End of Prototype Chain Prototype Chain 
const topProto = Object.getPrototypeOf(Object.prototype);

console.log(topProto);
What is Object.getPrototypeOf(Object.prototype)?
A) Object
B) null
C) undefined
D) Function
⚡ Medium • Pure Null Prototype Object.create(null) 
const dict = Object.create(null);

console.log(typeof dict.toString);
What is typeof dict.toString?
A) "undefined"
B) "function"
C) "object"
D) TypeError
⭐ Easy • instanceof Lookup instanceof 
function Vehicle() {}
function Car() {}
Car.prototype = Object.create(Vehicle.prototype);

const myCar = new Car();

console.log(myCar instanceof Car, myCar instanceof Vehicle);
What will be logged to the console?
A) true true
B) true false
C) false true
D) false false
🏆 Score: 0 / 5

7. Practice Challenge

🎯 Coding Challenge: Prototypal Inheritance

1. Create a Vehicle constructor with a prototype method move().
2. Create a child constructor Car that borrows properties with Vehicle.call(this, type) and links its prototype using Object.create(Vehicle.prototype).
3. Instantiate a Car and verify it can call move() and passes myCar instanceof Vehicle.

Your output will appear here.