लोड हो रहा है...

'this' कीवर्ड

JavaScript में 'this' कीवर्ड एक महत्वपूर्ण अवधारणा है जो वर्तमान निष्पादन संदर्भ (execution context) को संदर्भित करता है। इसे समझना ऐसा है जैसे आप यह जानते हैं कि आप घर के किस कमरे में हैं जब आप उसे सजा रहे हैं: हर कमरा (function या object) अपना संदर्भ रखता है, और 'this' उस कमरे की ओर इशारा करता है जिसमें आप काम कर रहे हैं। एक पोर्टफोलियो वेबसाइट में, 'this' वर्तमान प्रोजेक्ट ऑब्जेक्ट तक डायनामिक रूप से पहुँचने और उसे अपडेट करने के लिए उपयोग किया जाता है। एक ब्लॉग में, यह वर्तमान पोस्ट को संदर्भित करता है ताकि उसे संपादित, हटाया या प्रदर्शित किया जा सके। ई-कॉमर्स साइट में, 'this' शॉपिंग कार्ट में वर्तमान उत्पाद का प्रतिनिधित्व करता है। न्यूज़ साइट पर यह चयनित लेख के लिए इंटरैक्शन में मदद करता है, और सोशल प्लेटफॉर्म पर यह उपयोगकर्ता प्रोफ़ाइल या पोस्ट पर कार्यों जैसे लाइक, कमेंट या शेयरिंग को संभालता है। इस ट्यूटोरियल में पाठक सीखेंगे कि कैसे 'this' नियमित फ़ंक्शंस और arrow फ़ंक्शंस में अलग व्यवहार करता है, callbacks में context को सुरक्षित रूप से bind करना, और आम pitfalls से कैसे बचना जैसे कि intended object reference खो जाना। लाइब्रेरी के उदाहरण के रूप में, 'this' यह सुनिश्चित करता है कि आप जिस पुस्तक पर काम कर रहे हैं, उसी पर आपकी कार्रवाई हो – चाहे उसे अपडेट करना हो, स्थानांतरित करना या हटाना, जिससे आपका कोड organized और maintainable रहता है।

मूल उदाहरण

javascript
JAVASCRIPT Code 
function दिखाओप्रोजेक्ट() {
console.log(this.शीर्षक); // Access the title of the current project object
}
const प्रोजेक्ट = {
शीर्षक: "इंटरैक्टिव पोर्टफोलियो",
प्रदर्शित: दिखाओप्रोजेक्ट
};
प्रोजेक्ट.प्रदर्शित(); // 'this' points to the प्रोजेक्ट object

इस उदाहरण में, दिखाओप्रोजेक्ट फ़ंक्शन किसी भी object से स्वतंत्र रूप से परिभाषित किया गया है। जब इसे प्रोजेक्ट object की method के रूप में assign किया जाता है और प्रोजेक्ट.प्रदर्शित() के माध्यम से call किया जाता है, तो 'this' स्वचालित रूप से उस object की ओर इशारा करता है जिसने फ़ंक्शन को call किया है, यहाँ प्रोजेक्ट। इससे फ़ंक्शन dynamically शीर्षक (title) property तक पहुँच सकता है। यह समझना महत्वपूर्ण है क्योंकि 'this' स्थिर नहीं होता; यह invocation context पर निर्भर करता है। वास्तविक applications जैसे ब्लॉग में, यह pattern reusable functions बनाने की अनुमति देता है, जिन्हें किसी भी post object पर बिना code duplicate किए इस्तेमाल किया जा सकता है। arrow फ़ंक्शंस में 'this' lexical context से inherit होता है और उनका अपना 'this' नहीं होता। शुरुआती अक्सर उम्मीद करते हैं कि arrow फ़ंक्शंस method की तरह व्यवहार करेंगे, जिससे undefined values का सामना करना पड़ता है। 'this' को सही से समझकर, डेवलपर्स context-aware functions लिख सकते हैं जो objects, DOM elements और event handlers के साथ reliably interact करते हैं और asynchronous operations में lost context जैसी errors से बचते हैं।

व्यावहारिक उदाहरण

javascript
JAVASCRIPT Code 
const ब्लॉगपेज = {
पोस्ट्स: \["ES6 फीचर्स", "Async JS", "Web Security"],
दिखाओपोस्ट(index) {
console.log(`वर्तमान पोस्ट: ${this.पोस्ट्स[index]}`); // Access post via 'this'
}
};
document.querySelector("#पोस्टबटन").addEventListener("click", function() {
ब्लॉगपेज.दिखाओपोस्ट(1); // 'this' inside दिखाओपोस्ट refers to ब्लॉगपेज
});

यह व्यावहारिक उदाहरण दिखाता है कि 'this' का उपयोग DOM इंटरैक्शन में कैसे किया जाता है। जब उपयोगकर्ता #पोस्टबटन पर क्लिक करता है, तो ब्लॉगपेज.दिखाओपोस्ट(1) कॉल होता है। दिखाओपोस्ट के अंदर, 'this' ब्लॉगपेज की ओर इशारा करता है, जिससे posts array तक सही एक्सेस संभव होता है। यदि दिखाओपोस्ट को सीधे callback के रूप में पास किया जाता बिना bind किए, तो 'this' intended object को reference नहीं करेगा और posts तक पहुंच असंभव होगी। यह pattern portfolio websites, blogs, e-commerce platforms और social networks के लिए महत्वपूर्ण है जहाँ dynamic content updates और user interactions आवश्यक हैं। 'this' को सही तरीके से manage करना bugs से बचाता है और predictable behavior सुनिश्चित करता है। इसे समझकर developers reusable methods structure कर सकते हैं, dynamic content manipulate कर सकते हैं और backend APIs के साथ efficiently integrate कर सकते हैं।

Best Practices और सामान्य गलतियां:
Best Practices:

  • Regular functions का उपयोग करें जब 'this' object को reference करे जो function call कर रहा है।
  • Arrow functions का उपयोग करें जब lexical context को preserve करना हो।
  • Callbacks में functions pass करते समय 'this' को explicitly bind करें (bind, call, apply)।

  • Unnecessary global bindings से बचें ताकि performance और maintainability बेहतर रहे।
    सामान्य गलतियां:

  • Methods को callback में direct pass करना बिना bind किए, जिससे context खो जाता है।

  • Arrow functions में dynamic object reference की उम्मीद करना।
  • Undefined properties को access करना क्योंकि 'this' गलत है।

  • Event listeners को remove न करना, जिससे memory leaks हो सकते हैं।
    Debugging tips:

  • console.log(this) का उपयोग करें context inspect करने के लिए।

  • Callbacks में correct 'this' सुनिश्चित करने के लिए bind या arrow functions का प्रयोग करें।
  • Function types के बीच का अंतर समझें ताकि context-related errors से बचा जा सके।

📊 त्वरित संदर्भ

Property/Method Description Example
this 'this' points to the current execution context object प्रोजेक्ट.प्रदर्शित()
bind() Creates a new function with permanently bound 'this' दिखाओप्रोजेक्ट.bind(प्रोजेक्ट)()
call() Invokes function with specified 'this' temporarily दिखाओप्रोजेक्ट.call(प्रोजेक्ट)
apply() Similar to call but accepts arguments as array दिखाओप्रोजेक्ट.apply(प्रोजेक्ट, \[])
Arrow function Inherits 'this' from surrounding lexical context () => console.log(this)

सारांश और अगले कदम:
'this' कीवर्ड JavaScript में execution context को समझने के लिए आवश्यक है। यह developers को dynamic और reusable methods बनाने में सक्षम बनाता है जो objects, DOM elements और user interactions के साथ reliably interact करते हैं। 'this' को master करके portfolio websites, blogs, news sites, e-commerce platforms और social networks में predictable behavior सुनिश्चित किया जा सकता है। Regular और arrow functions के बीच अंतर समझना, और bind, call, apply का सही उपयोग context control को आसान बनाता है। आगे DOM manipulation, event delegation, component-based frameworks जैसे React या Vue और asynchronous callbacks को explore करना चाहिए। वास्तविक projects में अभ्यास और console.log(this) का debugging उपयोग intuition विकसित करता है, जिससे developers maintainable और performant JavaScript code लिख सकते हैं।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓
4
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 22 का 53
Javascript ट्यूटोरियल