this कीवर्ड
एक ही लेबल फ़ंक्शन कभी मग का नाम कहे, फिर वस्तु खो दे, फिर कप का नाम दिखाए। घुंघराले कोष्ठक वहीं रहे। बदली कॉल। JavaScript this को कॉल के समय चुनता है, फ़ंक्शन टाइप करते समय नहीं।
सीधे मेथड कॉल के बाद
मेथड वाले पाठ ने फ़ंक्शन को ऑब्जेक्ट पर रखा और product.tag() से चलाया। उस रूप में this बिंदु से पहले वाली वस्तु थी। पाठ वहीं रुका। यहाँ फ़ंक्शन अपनी जगह रहता है और कॉल बदलती है: वस्तु से अलग, call से निशाना, bind से ताला, या ऐरो के रूप में।
पाँच रूप जिनसे कॉल this तय करती है
📊 मेथड, खाली, call, bind, ऐरो
| रूप | उदाहरण | this कहाँ बैठता है |
|---|---|---|
| मेथड | product.tag() |
बिंदु से पहले वाली वस्तु |
| खाली | let show = product.tag; show() |
वह वस्तु नहीं (सख्त मोड में undefined) |
| call | product.tag.call(cup) |
जो वस्तु आप call को देते हैं, सिर्फ़ इस दौड़ के लिए |
| bind | product.tag.bind(product) |
बाद की कॉलों के लिए उसी वस्तु पर ताला |
| ऐरो | दूसरी फ़ंक्शन के अंदर () => this.name |
बाहरी फ़ंक्शन का this, बिंदु से पहले वाली वस्तु नहीं |
this पढ़ने से पहले कॉल का नाम लीजिए। फ़ंक्शन को वस्तु पर रखना this को जमा नहीं देता। फ़ैसला कॉल करती है। bind बाद की कॉल के लिए पहले से फ़ैसला कर देता है। ऐरो कॉल को छोड़कर उस फ़ंक्शन को देखता है जो उसे घेरे हुए है।
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());
बिंदु अब भी वस्तु का नाम बताता है
product.tag() फ़ंक्शन tag चलाता है और this को product पर रखता है। कंसोल Mug छापता है। यह मेथड वाले पाठ का नियम है, यहाँ आधार रेखा की तरह। अगली चार कॉलें जान-बूझकर उस रेखा से हटती हैं।
"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());
फ़ंक्शन को वस्तु से उठाओ, मग बिंदु के साथ चला जाता है
show और product.tag एक ही फ़ंक्शन हैं। show() के आगे बिंदु से पहले कोई वस्तु नहीं, इसलिए सख्त मोड में this undefined है। पहरेदार missing लौटाता है। पहरेदार हटाओ तो this.name गलती फेंकता है। इस पृष्ठ पर सख्त मोड इसलिए है कि नतीजा अनुमान लगाया जा सके। ढीली स्क्रिप्ट खाली कॉल को वैश्विक वस्तु की ओर मोड़ सकती है।
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));
call फ़ंक्शन को एक वस्तु के लिए उधार देता है
product.tag.call(cup) अब भी मग का tag चलाता है, पर इस दौड़ में this cup है। कंसोल Cup छापता है। product.name Mug ही रहता है। call फ़ंक्शन को cup पर चिपकाता नहीं। apply वही काम करता है जब अतिरिक्त तर्क एक सरणी में हों — इस लेबल को उनकी ज़रूरत नहीं।
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());
bind वस्तु को बाद की खाली कॉल के लिए रखता है
bind नई फ़ंक्शन लौटाता है। उसके अंदर this product रहता है, भले show() में बिंदु न हो। कंसोल Mug छापता है। मूल tag नहीं बदलता। जब बटन, टाइमर, या कोई और फ़ंक्शन मेथड को वस्तु के बिना बुलाए, तब bind लो।
"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());
ऐरो this बिंदु से नहीं लेता
product.tag() मेथड कॉल जैसा दिखता है, पर tag ऐरो है। ऐरो का अपना this नहीं होता। वह this make से लेता है, और make shelf.make() की तरह चला, इसलिए this shelf है। कंसोल Shelf छापता है, Mug नहीं। product पर साधारण मेथड होता तो Mug आता। ऐरो पहले के पाठ में आ चुके हैं; यह पृष्ठ सिर्फ़ this पर उनका असर दिखाता है।
कॉल को काम से मिलाओ
वस्तु बिंदु से पहले है? this को वही वस्तु पढ़ो। फ़ंक्शन उठा लिया और bind नहीं किया? वस्तु की उम्मीद मत रखो। दूसरी वस्तु, एक ही दौड़? call इस्तेमाल करो। बाद की कॉल बिना बिंदु के भी मग देखे? पहले bind। ऐरो लिखा है? बाहर उस फ़ंक्शन को देखो जो उसे घेरता है, बिंदु से पहले वाली वस्तु को नहीं। कंस्ट्रक्टर और क्लास भी this सेट करते हैं, वे आगे के पाठ के लिए हैं। अगला JSON है: डेटा बताने वाला पाठ, this का नया नियम नहीं।
ताला लगे लेबल को पृष्ठ पर रखो
bind से tag को मग पर बाँधो, फिर उस नई फ़ंक्शन को बिना बिंदु बुलाओ। नतीजा एक अनुच्छेद में लिखो।
<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>
अनुच्छेद Mug दिखाता है। show() के आगे बिंदु से पहले वस्तु नहीं है, फिर भी पंक्ति मग का नाम कहती है क्योंकि bind ने this बाँध दिया। सिर्फ़ product.name बदलो, पृष्ठ ताज़ा करो, अनुच्छेद साथ चलेगा। अगला पाठ: JavaScript में JSON — डेटा बताने वाला पाठ, this का नया नियम नहीं।
अभ्यास के चरण
product.tag()बुलाओ औरMugपढ़ो।- फ़ंक्शन को
showमें रखो, सख्त मोड मेंshow()बुलाओ, औरmissingपढ़ो। product.tag.call(cup)बुलाओ औरCupपढ़ो।tagकोproductसे बाँधो, नई फ़ंक्शन को बिना बिंदु बुलाओ, औरMugपढ़ो।shelf.make()चलाओ औरShelfपढ़ो,Mugनहीं।- HTML डेमो में सिर्फ़
product.nameबदलो, ताज़ा करो, और अनुच्छेद पढ़ो।
आम फिसलन
- यह मानना कि फ़ंक्शन वस्तु पर बैठा है तो
thisजमा हो गया - सख्त मोड में
show()बुलाना और फिर भीMugकी उम्मीद रखना - यह सोचना कि
calltagकोcupपर नकल करता है - यह उम्मीद कि
bindमूलtagको दोबारा लिखे, नई फ़ंक्शन न दे - मेथड की जगह ऐरो लिखना और बिंदु से पहले वाली वस्तु की उम्मीद रखना
- अगले पाठ को
thisका दूसरा नियम समझना — JSON डेटा का पाठ रूप है
सार
thisकॉल चुनती है, कोष्ठक नहींobject.method()thisको बिंदु से पहले वाली वस्तु पर रखता है- सख्त मोड में खाली कॉल
thisको उस वस्तु पर नहीं ले जाती callthisको दी गई वस्तु पर रखता है, सिर्फ़ उस दौड़ के लिएbindऐसी फ़ंक्शन देता है जिसकाthisताले में रहता है- ऐरो
thisघेरने वाली फ़ंक्शन से लेता है - बँधी कॉल पृष्ठ की एक पंक्ति भर सकती है
- आगे: JSON, डेटा बताने वाला पाठ
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी