17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) › 17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype

45 mins

← Prev Next →

Course Syllabus

Module 1: Foundations & Evolution (Zero Level to Syntax Mastery)

01. What is JavaScript? History, TC39 & Client vs Server Execution 02. How Browsers Execute JS & The Critical Rendering Path 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout 04. Variables, Scope & The Temporal Dead Zone (var vs let vs const) 05. Type Coercion, Equality Quirks (== vs ===, NaN & Object.is)

Module 2: V8 Engine Internals & Execution Context Architecture

06. Google V8 Engine Architecture: Ignition, Sparkplug & TurboFan 07. Execution Context Lifecycle: Creation Phase vs Execution Phase 08. Garbage Collection Mechanics & Memory Leak Profiling

Module 3: Functions, Closures & Functional Programming Patterns

09. First-Class Functions, Arrow Functions & Lexical this Binding 10. Closures Deep Dive: Encapsulation, Factory Functions & Memory Overhead 11. Currying, Partial Application & Function Composition (Pipe/Compose) 12. Method Borrowing: call(), apply(), bind() & Custom Polyfills

Module 4: Asynchronous Architecture, Event Loop & Promises

13. Event Loop Masterclass: Call Stack, Web APIs, Microtasks & Macrotasks 14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill 15. Promise Combinators: all, allSettled, race, any & Concurrency Control 16. async/await Internals, Generators (function*) & Coroutine Emulation

Module 5: Objects, Prototypes, Classes & Metaprogramming

17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype 18. ES6 Classes, Static Blocks, Private Fields and Subclassing 19. Metaprogramming with Proxy & Reflect API (Reactive State Engine)

Module 6: Browser DOM, Event Architecture & High-Scale Polyfills

20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation 21. Debouncing vs Throttling: Production Polyfills with Leading & Trailing Flags 22. Big Tech Machine Coding: Custom EventEmitter & PubSub System 23. Big Tech Machine Coding: Deep Clone with Circular References & LRU Cache

Interactive Lesson Studio

# 17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype

> JavaScript Notes by Rishabh - Topic 17

---

### 1. Prototypal Inheritance Kya Hai? (Asaan Bhasha Me)

Java ya C++ me inheritance **Class Blueprints** se banti hai (Classical Inheritance). Par **JavaScript me classes hoti hi nahi theen!**

JavaScript me har ek object doosre object se sidha judaa hota hai. Is model ko bolte hain: **Differential Prototype Delegation**.

**Real-Life Analogy:**
> Jab tujhe koi aisi cheez chahiye jo tere paas nahi hai (e.g. screwdriver):  
> 1. Tu pehle apni jeb (`this`) me dekhta hai.  
> 2. Nahi mili toh apne Papa (`__proto__`) se mangta hai.  
> 3. Unke paas bhi nahi toh Dada ji (`Object.prototype`) se mangta hai.  
> 4. Agar unke paas bhi nahi, toh result aata hai `undefined` (Dada ji ka prototype `null` hota hai)!

---

### 2. `__proto__` vs `prototype` (Sabse Bada Confusion Dur Karo)

**Golden Formula:**
```javascript
function User(name) {
    this.name = name;
}
const user1 = new User("Rishabh");

console.log(user1.__proto__ === User.prototype); // ✅ true!
console.log(User.prototype.__proto__ === Object.prototype); // ✅ true!
console.log(Object.prototype.__proto__ === null); // ✅ true! (End of Chain)
```

---

### 3. Pure Prototype Delegation with `Object.create()`

Agar bina constructor function ke clean inheritance karni ho:

```javascript
const human = {
    talk() {
        return `${this.name} is talking...`;
    }
};

// human ko prototype banake naya object banao
const coder = Object.create(human);
coder.name = "Rishabh";
coder.code = function() { return "Coding AI systems..."; };

console.log(coder.talk()); // "Rishabh is talking..." (Delegated up the chain!)
console.log(coder.hasOwnProperty("name")); // true
console.log(coder.hasOwnProperty("talk")); // false (Parent ke paas hai)
```

---

### 4. Big Tech Security Vulnerability: Prototype Pollution

Agar koi hacker malicious payload bhej kar `Object.prototype` ko pollute kar de:

```javascript
// ❌ Dangerous Hack:
const payload = JSON.parse('{"__proto__": {"isAdmin": true}}');

const regularUser = {};
console.log(regularUser.isAdmin); // ⚠️ true! Pura app compromise ho gaya!

// ✅ Big Tech Defense: Object.create(null) or Map
const safeDictionary = Object.create(null); // No prototype, 100% pollution-proof!
```

---

### 5. Prototype Chain Performance Best Practices

1. **Property Shadowing:** Agar child ke paas property hai, JS parent ko check nahi karega (Fast).
2. **Never mutate `__proto__` at runtime:** `Object.setPrototypeOf()` V8 engine ke inline caches ko tor deta hai aur code 10x slow ho jata hai. Hamesha `Object.create()` se object initialize karo.

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **`Object.create(null)` ka kya benefit hai?** -> Ye bina kisi prototype chain ke pure clean object banata hai (`toString`, `valueOf` bhi nahi hota), jo Prototype Pollution attacks se 100% safe rehta hai.
2. **`hasOwnProperty()` vs `in` operator me kya fark hai?** -> `hasOwnProperty` sirf object ki apni direct properties check karta hai; `in` operator poori prototype chain traverse karta hai.
3. **Prototype Chain ka aakhri endpoint kya hota hai?** -> `Object.prototype.__proto__`, jo `null` hota hai.

---
**Next Topic:** 18. ES6 Classes, Static Blocks, Private Fields and Subclassing

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Easy

1. Prototype Chain Traversal Inspector

Write a function `getPrototypeChain(obj)` that traverses up the prototype chain and returns an array of prototype names until reaching null.

💡 View Pro Interview Hint

• Use Object.getPrototypeOf(current) in a while loop.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Prototype Chain Traversal Inspector

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track