Advanced JavaScript
The this Keyword
Context-Dependent Reference
💡 this JavaScript ka sabse confusing feature hai — jaise ek word "yahan" jiska matlab HAMESHA badalta hai kaun bol raha hai uske hisaab se. this ki value FUNCTION KAISE CALL hua uspar depend karti hai, function KAHA DEFINE hua uspar nahi (arrow functions ke alawa).
Regular functions mein, this depend karta hai CALL karne ke tareeke par: object.method() mein this = object. Standalone function() mein this = undefined (strict mode) ya global object. Arrow functions this apna NAHI rakhte — SURROUNDING scope ka this "inherit" karte hain (lexical this).
const person = {
name: "Aarav",
regularMethod: function() {
console.log(this.name); // "Aarav" — this = person (object jisne call kiya)
},
arrowMethod: () => {
console.log(this.name); // undefined — arrow ka this object se nahi aata
}
};
person.regularMethod(); // "Aarav"
person.arrowMethod(); // undefined (this = surrounding/global scope)
function standalone() {
console.log(this); // undefined (strict mode) ya global object
}
standalone();👆
this JavaScript ka sabse confusing feature hai — jaise ek word "yahan" jiska matlab HAMESHA badalta hai kaun bol raha hai uske hisaab se. this ki value FUNCTION KAISE CALL hua uspar depend karti hai, function KAHA DEFINE hua uspar nahi (arrow functions ke alawa).
1 / 6
⚡ Quick Recap
- this = KAISE call hua uspar depend karta hai, KAHA define hua uspar nahi
- object.method() → this = object; standalone function() → this = undefined/global
- Arrow functions this apna nahi rakhte — surrounding scope se "inherit"
Is page mein (2 subtopics)
Teeno methods manually this ki value SET karte hain — call()/apply() function ko TURANT chalate hain given this ke saath (farq: arguments ka format), bind() ek NAYA function return karta hai (baad mein call karne ke liye), permanently this fixed karke.
const person = { name: "Aarav" };
function greet(greeting) {
console.log(greeting + ", " + this.name);
}
greet.call(person, "Hello"); // "Hello, Aarav" — turant chalta hai
greet.apply(person, ["Hi"]); // "Hi, Aarav" — array mein arguments
const boundGreet = greet.bind(person);
boundGreet("Hey"); // "Hey, Aarav" — naya function, this permanently fixedTip: bind() especially event handlers mein useful hai jab tumhe guarantee chahiye ki this hamesha sahi object ko point karega, chahe function kaise bhi call ho (jaise button.addEventListener('click', obj.method.bind(obj))).
Class methods mein this khona ek common React/event-handler bug hai — arrow function class fields (modern syntax) se automatically SAHI this maintain hota hai, bina manual bind() ke.
class Button {
constructor() {
this.label = "Click me";
}
// Regular method — this "lose" ho sakta hai agar detached call ho:
regularClick() {
console.log(this.label);
}
// Arrow function class field — this HAMESHA correct rehta hai:
arrowClick = () => {
console.log(this.label);
}
}
const btn = new Button();
const detached1 = btn.regularClick;
// detached1(); // ERROR/undefined — this khо gaya
const detached2 = btn.arrowClick;
detached2(); // "Click me" — abhi bhi kaam karta hai! this arrow se "captured" haiTip: Ye pattern React class components mein bahut common tha (event handlers ke liye) — modern functional components + hooks mein this ka concern hi khatam ho jaata hai, isliye ye issue kam relevant hai aaj.