जावास्क्रिप्ट में यह कीवर्ड नए डेवलपर्स के लिए सबसे भ्रमित करने वाली अवधारणाओं में से एक हो सकता है। जहां इसका उपयोग किया जाता है उसके आधार पर इसका मूल्य बदल सकता है, जिससे विभिन्न संदर्भों में इसके व्यवहार को समझना महत्वपूर्ण हो जाता है। यह आलेख विभिन्न परिदृश्यों में इसके उपयोग की खोज करके इस कीवर्ड के रहस्य को उजागर करेगा।

यह क्या है?

जावास्क्रिप्ट में, यह उस संदर्भ को संदर्भित करता है जिसमें एक फ़ंक्शन निष्पादित किया जाता है। यह ऑब्जेक्ट के भीतर से ही किसी ऑब्जेक्ट के गुणों और विधियों तक पहुंचने का एक तरीका प्रदान करता है।

वैश्विक संदर्भ

जब वैश्विक संदर्भ में (किसी फ़ंक्शन या ऑब्जेक्ट के बाहर) उपयोग किया जाता है, तो यह वैश्विक ऑब्जेक्ट को संदर्भित करता है। एक वेब ब्राउज़र में, वैश्विक वस्तु विंडो है।

console.log(this); // In a browser, this will log the window object

कार्य प्रसंग

जब किसी फ़ंक्शन के अंदर उपयोग किया जाता है, तो यह इस पर निर्भर करता है कि फ़ंक्शन को कैसे कॉल किया जाता है।

नियमित फ़ंक्शन कॉल

एक नियमित फ़ंक्शन कॉल में, यह वैश्विक ऑब्जेक्ट को संदर्भित करता है (या सख्त मोड में अपरिभाषित)।

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

showThis(); // Logs window (or undefined in strict mode)

विधि कॉल

जब किसी फ़ंक्शन को किसी ऑब्जेक्ट की विधि कहा जाता है, तो यह ऑब्जेक्ट को ही संदर्भित करता है।

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // Logs "Alice"

कंस्ट्रक्टर प्रसंग

जब किसी फ़ंक्शन को नए कीवर्ड के साथ कंस्ट्रक्टर के रूप में उपयोग किया जाता है, तो यह नव निर्मित इंस्टेंस को संदर्भित करता है।

function Person(name) {
  this.name = name;
}

const bob = new Person('Bob');
console.log(bob.name); // Logs "Bob"

तीर के कार्य

एरो फ़ंक्शंस का व्यवहार अलग होता है। उनका अपना यह सन्दर्भ नहीं है; इसके बजाय, उन्हें यह आसपास के शाब्दिक संदर्भ से विरासत में मिला है।

const obj = {
  name: 'Carol',
  regularFunction: function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.regularFunction(); // Logs "Carol"
obj.arrowFunction();   // Logs undefined (or the global object in non-strict mode)

इवेंट संचालक

इवेंट हैंडलर में, यह उस तत्व को संदर्भित करता है जिसने इवेंट प्राप्त किया।

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

स्पष्ट बंधन

जावास्क्रिप्ट कॉल, अप्लाई और बाइंड का उपयोग करके स्पष्ट रूप से इसका मूल्य निर्धारित करने के तरीके प्रदान करता है।

कॉल करें और आवेदन करें

कॉल और अप्लाई विधियां आपको निर्दिष्ट मान के साथ एक फ़ंक्शन शुरू करने की अनुमति देती हैं।

function introduce() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Dave' };

introduce.call(person); // Logs "Hello, my name is Dave"
introduce.apply(person); // Logs "Hello, my name is Dave"

कॉल और अप्लाई के बीच अंतर यह है कि वे तर्कों को कैसे संभालते हैं। कॉल तर्कों को अलग-अलग लेता है, जबकि apply उन्हें एक सरणी के रूप में लेता है।

बाँध

बाइंड विधि एक नया फ़ंक्शन बनाती है, जिसे कॉल करने पर, इसका मान दिए गए मान पर सेट हो जाता है।

function introduce() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Eve' };

const boundIntroduce = introduce.bind(person);
boundIntroduce(); // Logs "Hello, my name is Eve"

निष्कर्ष

जावास्क्रिप्ट में महारत हासिल करने के लिए इस कीवर्ड को समझना आवश्यक है। यह पहचानकर कि यह विभिन्न संदर्भों में कैसे व्यवहार करता है, आप अधिक पूर्वानुमानित और रखरखाव योग्य कोड लिख सकते हैं। चाहे आप विधियों, कंस्ट्रक्टरों, या एरो फ़ंक्शंस के साथ काम कर रहे हों, यह कैसे काम करता है यह जानने से आपको सामान्य नुकसान से बचने और इसकी शक्ति का प्रभावी ढंग से उपयोग करने में मदद मिलेगी।