# JavaScript mein this, call(), apply(), aur bind() ka Jadoo....

* * *

## 1\. Introduction

Agar aapne JavaScript seekhna shuru kiya hai, toh aapka samna `this` keyword se zaroor hua hoga. Sach batayein toh: zyadatar developers—chahe woh beginners hon ya intermediates—`this` ko lekar kafi confuse rehte hain. Yeh kabhi-kabhi ek jadoo jaisa lagta hai jo code ke ek hisse mein toh sahi chalta hai, lekin dusre hisse mein mysterious tarah se `undefined` error dene lagta hai.

Toh, `this` ko samjhna itna zaroori kyu hai? `this` par pakad hone se aap bahut hi reusable aur organized code likh sakte hain. Yeh aapko functions ko dynamic tarah se chalane aur alag-alag objects ke beech methods share karne ki power deta hai.

Is guide mein hum `this` ke parde hatayenge. Hum samjhenge ki yeh kya hai, kaise kaam karta hai, aur aap kaise JavaScript ke teen powerful methods: `call()`, `apply()`, aur `bind()` ka use karke is par poora control paa sakte hain.

* * *

## 2\. JavaScript mein "this" ka Matlab Kya Hai?

Seedhe shabdon mein: `this` **us object ko represent karta hai jo function ko call kar raha hai.**

Is concept ko ek simple real-world analogy se samjhte hain. Maan lijiye aapko ek command di gayi: *"Gaadi saaf karo!"* Agar aap ghar par hain, toh "gaadi" ka matlab aapki apni personal car hai. Lekin agar aap ek car dealership mein kaam kar rahe hain aur aapka manager wahi command deta hai, toh "gaadi" ka matlab dealership ki car hogi.

Command ("gaadi saaf karo") bilkul wahi hai, lekin **context** (kaun keh raha hai aur kahan keh raha hai) badalne se uska matlab poori tarah badal gaya.

JavaScript mein bhi function usi command ki tarah hai. `this` keyword yeh decide karta hai ki "gaadi" kaunsi hai, is baat par depend karte hue ki function ko *kaise* aur *kahan* call kiya gaya hai. Bas yeh yaad rakhein: `this` ki value ispar depend karti hai ki function **kaise call hua**, na ki ispar ki woh **kahan likha gaya tha**.

* * *

## 3\. "this" Normal Functions ke Andar

Jab hum ek normal, standalone JavaScript function ke andar `this` use karte hain, toh kya hota hai? Yeh depend karta hai ki aap "Strict Mode" use kar rahe hain ya nahi.

Dekhte hain:

```javascript
// Non-strict mode behavior
function showContext() {
  console.log(this);
}

showContext(); 
```

**Explanation:** By default, agar ek normal function bina kisi specific object ke call hota hai, toh `this` browser ke **Global Window Object** ko point karta hai. Yeh khatarnak ho sakta hai kyunki aap galti se global variables ko change kar sakte hain.

Isse bachne ke liye, modern developers "Strict Mode" use karte hain:

```javascript
"use strict";

function showStrictContext() {
  console.log(this);
}

showStrictContext(); 
```

**Explanation:** Strict mode mein, JavaScript global window par default nahi karta. Iske bajaye, woh `this` ko `undefined` set kar deta hai. Yeh ek safety net ki tarah kaam karta hai!

* * *

## 4\. "this" Objects ke Andar

`this` keyword ka asli maza tab aata hai jab hum ise objects ke andar use karte hain. Jab ek function kisi object ke andar hota hai, toh use **method** kehte hain.

Jab ek method `this` use karta hai, toh woh usi object ko point karta hai jiske andar woh method hai.

```javascript
const user = {
  firstName: "Jane",
  lastName: "Doe",
  greet: function() {
    console.log("Hello, mera naam " + this.firstName + " " + this.lastName + " hai.");
  }
};

user.greet(); 
```

**Explanation:** Jab hum `user.greet()` call karte hain, JavaScript dot ke left side (`user.`) dekhta hai. Woh samajh jata hai ki `user` object function call kar raha hai. Isliye, `this` ka matlab `user` object ho jata hai.

* * *

## 5\. What `call()` Does

Kabhi-kabhi aap ek object ka method kisi dusre object par use karna chahte hain. Iske liye JavaScript humein `call()` method deta hai.

`call()` function ko **turant** (immediately) chalata hai aur aapko allow karta hai ki aap khud batayein ki `this` ka kya matlab hona chahiye.

```javascript
const premiumMember = {
  name: "Alice",
  sayWelcome: function(city, country) {
    console.log("Welcome " + this.name + " from " + city + ", " + country);
  }
};

const standardMember = {
  name: "Bob"
};

// Alice apna method use kar rahi hai
premiumMember.sayWelcome("New York", "USA");

// Bob ne method 'borrow' kiya call() use karke
premiumMember.sayWelcome.call(standardMember, "London", "UK");
```

**Explanation:** `.call(standardMember, ...)` use karke humne JavaScript se kaha: *"sayWelcome function chalao, lekin aise behave karo jaise standardMember ne ise call kiya ho."* Isliye `this.name` "Bob" print karta hai.

* * *

## 6\. What `apply()` Does

`apply()` method bilkul `call()` ki tarah hi kaam karta hai—yeh bhi function ko turant chalata hai aur `this` badal deta hai.

Toh farak kya hai? **Arguments bhejne ka tareeka.**

Jahan `call()` mein hum arguments ek-ek karke bhejte hain (commas ke saath), `apply()` unhe ek **Array** ke roop mein leta hai.

```javascript
const chef = {
  name: "Mario",
  cook: function(dish1, dish2) {
    console.log(this.name + " " + dish1 + " aur " + dish2 + " bana rahe hain.");
  }
};

const assistant = {
  name: "Luigi"
};

// apply() use karke arguments array mein bhejna
chef.cook.apply(assistant, ["Pasta", "Pizza"]);
```

* * *

## 7\. What `bind()` Does

`call()` aur `apply()` function ko turant chala dete hain. Lekin agar aap function ko abhi nahi, balki baad mein (jaise kisi button click par) chalana chahte hain?

Yahan `bind()` kaam aata hai.

`bind()` function ko turant nahi chalata. Iske bajaye, yeh **ek nayi function ki copy return karta hai** jisme `this` ki value hamesha ke liye "lock" ho jati hai.

```javascript
const wizard = {
  name: "Merlin",
  castSpell: function(spellName) {
    console.log(this.name + " ne " + spellName + " spell mara!");
  }
};

const apprentice = {
  name: "Arthur"
};

// Arthur ke liye ek naya, permanent function banana
const arthursSpell = wizard.castSpell.bind(apprentice);

// Ab hum ise jab chahe call kar sakte hain!
arthursSpell("Fireball");
```

* * *

## 8\. `call()`, `apply()`, aur `bind()` mein Farq

In teeno ke beech ke farq ko is table se yaad rakhein:

| Feature | `call()` | `apply()` | `bind()` |
| --- | --- | --- | --- |
| **Kaise chalta hai** | Turant (Immediately) | Turant (Immediately) | Turant nahi chalta |
| **Arguments bhejna** | Ek-ek karke (Commas) | Array `[]` mein ek saath | Ek-ek karke (Commas) |
| **Kya return karta hai** | Function ka result | Function ka result | Ek naya Function |

* * *

## 9\. Practical Assignment Example

Chaliye sab kuch saath mein try karte hain:

```javascript
const admin = {
  username: "SuperAdmin",
  logAction: function(actionType, status) {
    console.log(`[${status}] User '${this.username}' ne kiya: ${actionType}`);
  }
};

const normalUser = {
  username: "Guest_01"
};

// 1. Normal call
admin.logAction("System Restart", "SUCCESS");

// 2. call() use karke borrow karna
admin.logAction.call(normalUser, "File Download", "SUCCESS");

// 3. apply() use karke borrow karna
admin.logAction.apply(normalUser, ["Profile Delete", "ERROR"]);

// 4. bind() use karke naya function banana
const guestLogger = admin.logAction.bind(normalUser);
guestLogger("Dashboard View", "SUCCESS");
```

* * *

## 10\. Context Flow ko Samjhna (Diagrams)

### Function aur Caller ka Rishta

Seedhe shabdon mein, caller hi context decide karta hai.

```mermaid
flowchart LR
    Caller[Caller Object<br>jaise 'user'] -->|Call karta hai| Func[Object Method]
    Func -->|'this' refers back to| Caller
```

* * *

## 11\. Common Mistakes jo Developers Karte Hain

In galtiyon se bachein:

*   **Mistake 1: Object Methods ke liye Arrow Functions use karna** Arrow functions (`() => {}`) ka apna `this` nahi hota. Woh apne baahar wale scope se `this` lete hain. Agar aap method ke liye arrow function use karenge, toh `this` aksar global window ko point karega. *Sahi tareeka: Object methods ke liye hamesha normal* `function()` *use karein.*
    
*   **Mistake 2: Callbacks mein Context kho dena** Jab aap kisi method ko `setTimeout` ya event listener mein bhejte hain, toh woh apna context kho deta hai. *Sahi tareeka: Use arrow function mein wrap karein ya* `.bind()` *use karke context lock kar dein.*
    

* * *

## 12\. Interview Questions

Interview ke liye taiyar ho jao:

1.  **"**`call()` **aur** `apply()` **mein kya farq hai?"** *Answer:* Dono function ko turant chalate hain aur `this` badalte hain. Farak sirf itna hai ki `call` arguments ko alag-alag leta hai, aur `apply` unhe ek array mein leta hai.
    
2.  **"Kya ek baar** `bind()` **karne ke baad hum** `this` **dobara badal sakte hain?"** *Answer:* Nahi! Ek baar function bind ho gaya, toh uska `this` permanently lock ho jata hai.
    
3.  **"Arrow functions mein** `this` **kise point karta hai?"** *Answer:* Arrow functions ka apna `this` nahi hota, woh apne surounding (lexical) scope se `this` lete hain.
    

* * *

Hum umeed karte hain ki is guide se aapko `this`, `call`, `apply`, aur `bind` ka concept ekdum clear ho gaya hoga. Apne browser console mein in examples ko try karein aur practice karte rahein. Happy coding!