18. ES6 Classes, Static Blocks, Private Fields and Subclassing • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) › 18. ES6 Classes, Static Blocks, Private Fields and Subclassing

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

# 18. ES6 Classes, Static Blocks, Private Fields and Subclassing

> JavaScript Notes by Rishabh - Topic 18

---

### 1. ES6 Classes Kya Hain? (Asaan Bhasha Me)

ES6 (2015) me jo `class` keyword aaya, wo koi naya object-oriented model nahi hai — wo **Prototypal Inheritance ka ek sundar syntactic wrapper** hai.

Par ES2022 me aate-aate JavaScript Classes me **Engine-Level True Privacy (`#private`)** aur **Static Initializer Blocks** jud gaye, jisse ye C++ aur Java jitni powerful ban gayi hain!

---

### 2. True Private Fields (`#field`) vs Normal Fields

Pehle programmers private variable ke liye convention use karte the: `_secret` (Par bahar se `user._secret` access ho jata tha).  
Ab JavaScript me **`#` hash prefix** V8 engine level par privacy enforce karta hai!

```javascript
class BankAccount {
    // 🔒 True Private Instance Fields (Outside access impossible)
    #balance = 0;
    #accountNumber;

constructor(initialDeposit, accNo) {
        this.#balance = initialDeposit;
        this.#accountNumber = accNo;
    }

deposit(amount) {
        if (amount <= 0) throw new Error("Invalid amount");
        this.#balance += amount;
        return this.#balance;
    }

// Getter for controlled read-only access
    get balance() {
        return this.#balance;
    }
}

const myAcc = new BankAccount(1000, "ACC-9921");
console.log(myAcc.balance); // 1000
myAcc.deposit(500);
console.log(myAcc.balance); // 1500

// ❌ Direct Access Throws SyntaxError:
// console.log(myAcc.#balance); 
// SyntaxError: Private field '#balance' must be declared in an enclosing class!
```

---

### 3. Static Blocks & Subclassing (`extends` & `super`)

#### A) Static Initializer Blocks (`static { ... }`)
Class memory me load hote hi ek baar one-time heavy setup ya configuration run karne ke liye:

```javascript
class DatabaseConnection {
    static connectionPool;

static {
        // Class load hote hi execute hoga
        DatabaseConnection.connectionPool = ["conn_1", "conn_2", "conn_3"];
        console.log("⚡ DB Pool Initialized with 3 sockets");
    }
}
```

#### B) Subclassing with `super()`
```javascript
class Character {
    constructor(name, health) {
        this.name = name;
        this.health = health;
    }
    attack() {
        return `${this.name} strikes for 10 DMG!`;
    }
}

class Mage extends Character {
    constructor(name, health, mana) {
        super(name, health); // Parent constructor call karna zaroori hai!
        this.mana = mana;
    }

castSpell() {
        return `${this.name} casts Fireball using ${this.mana} Mana!`;
    }
}

const wizard = new Mage("Gandalf", 100, 50);
console.log(wizard.attack());    // "Gandalf strikes for 10 DMG!"
console.log(wizard.castSpell()); // "Gandalf casts Fireball using 50 Mana!"
```

---

### 4. Comparison Table: ES5 Constructor vs ES6 Class

| Feature | ES5 Constructor Functions | ES6 Classes |
| :--- | :--- | :--- |
| **Declaration Type** | Function (`function Person(){}`) | Class (`class Person {}`) |
| **Hoisting Behavior** | Function hoisted (Call before declaration possible) | **TDZ (Temporal Dead Zone)** - ReferenceError |
| **Call without `new`** | Chalta hai (par `this` window ban jayega) | ❌ `TypeError: Class constructor cannot be invoked without 'new'` |
| **Strict Mode** | Opt-in (`"use strict"`) | **By default 100% Strict Mode** |
| **Private Fields** | Sirf Closures se possible | Native `#privateField` syntax |

---

### 5. Big Tech Production Pitfall: `super()` Se Pehle `this` Access Karna

```javascript
class Admin extends Character {
    constructor(name, role) {
        // ❌ ERROR: super() se pehle this use nahi kar sakte!
        // this.role = role; // ReferenceError: Must call super constructor before accessing 'this'
        
        super(name, 1000); // ✅ Correct
        this.role = role;
    }
}
```

---

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

1. **JavaScript me Class kya sach me ek class hai?** -> Nahi, under the hood ye function hi hai (`typeof Class === 'function'`) aur prototypal inheritance use karta hai.
2. **`#private` field aur TypeScript ke `private` keyword me kya fark hai?** -> TS ka `private` sirf compile-time par check hota hai (runtime JS me access ho jata hai); JS ka `#private` V8 runtime engine level par enforced hota hai.
3. **`super()` keyword constructor me kyun mandatory hota hai?** -> Subclass me parent class ka execution context aur `this` initialize karne ke liye `super()` call karna padta hai.

---
**Next Topic:** 19. Metaprogramming with Proxy & Reflect API (Reactive State Engine)

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. Secure Bank Account Class with #Private Fields

Build a `BankAccount` class with private balance `#balance` that only allows deposits, withdrawals with balance checks, and read-only balance access.

💡 View Pro Interview Hint

• Use #balance for private instance fields.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Secure Bank Account Class with #Private Fields

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track