कॉल(), अप्लाई(), और बाइंड() तरीकों को सीखना महत्वपूर्ण है क्योंकि वे आपको जावास्क्रिप्ट में इसके संदर्भ को नियंत्रित करने की अनुमति देते हैं। ऐसी स्थितियों में जहां डिफ़ॉल्ट रूप से यह व्यवहार अपेक्षा के अनुरूप काम नहीं करता है, जैसे जब एक ऑब्जेक्ट से दूसरे ऑब्जेक्ट में तरीकों को उधार लेना या कॉलबैक के अंदर सही संदर्भ बनाए रखना, ये विधियां लचीलापन और नियंत्रण प्रदान करती हैं। उनमें महारत हासिल करके, आप अधिक कुशल, पुन: प्रयोज्य और संदर्भ-जागरूक फ़ंक्शन लिख सकते हैं, जो विशेष रूप से जटिल अनुप्रयोगों में उपयोगी है।

कॉल(), अप्लाई() और बाइंड() तरीकों पर जाने से पहले, आइए 'इस' कीवर्ड और इसके तंत्र को समझें।

'यह' कीवर्ड

आइए यहां निम्नलिखित बुलेट बिंदुओं से समझें कि यह कीवर्ड कब और क्या संदर्भित करता है:

• एक ऑब्जेक्ट विधि में, यह ऑब्जेक्ट को संदर्भित करता है। किसी ऑब्जेक्ट के भीतर परिभाषित विधि के अंदर, यह उस ऑब्जेक्ट को इंगित करेगा जो विधि का मालिक है।

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

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

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

  
    Click to Remove Me!
  
  

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

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

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

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

कॉल() विधि

कॉल() विधि आपको एक ऑब्जेक्ट से एक फ़ंक्शन या विधि को "उधार" लेने देती है और दूसरे ऑब्जेक्ट को पहले तर्क के रूप में पास करके किसी अन्य ऑब्जेक्ट के साथ इसका उपयोग करने देती है। पहला तर्क फ़ंक्शन के अंदर यह मान बन जाता है, और उसके बाद अतिरिक्त तर्क आते हैं।

कॉल() विधि कोई नया फ़ंक्शन नहीं बनाती है; यह मौजूदा फ़ंक्शन को दिए गए संदर्भ और तर्कों के साथ चलाता है।

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

इस उदाहरण में, कॉल() का उपयोग व्यक्ति 1 के डेटा (प्रथम नाम और अंतिम नाम) वाले व्यक्ति के पूर्ण नाम विधि को निष्पादित करने के लिए किया जाता है, और अतिरिक्त तर्क "ओस्लो" और "नॉर्वे" हैं।

लागू करें() विधि

लागू() विधि कॉल() विधि के समान है। मुख्य अंतर यह है कि फ़ंक्शन में तर्क कैसे पारित किए जाते हैं। लागू() के साथ, आप तर्कों को अलग-अलग के बजाय एक सरणी (या एक सरणी जैसी वस्तु) के रूप में पास करते हैं।

कॉल() की तरह, लागू() विधि कोई नया फ़ंक्शन नहीं बनाती है। यह दिए गए संदर्भ (यह मान) और तर्कों के साथ फ़ंक्शन को तुरंत निष्पादित करता है।

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

इस उदाहरण में, apply() का उपयोग व्यक्ति ऑब्जेक्ट के पूर्ण नाम विधि को कॉल करने के लिए किया जाता है, लेकिन व्यक्ति 1 के संदर्भ (इस) के साथ। तर्क "ओस्लो" और "नॉर्वे" को एक सरणी के रूप में पारित किया जाता है।

बाइंड() विधि

जावास्क्रिप्ट में बाइंड() विधि आपको कॉल() और अप्लाई() की तरह ही किसी फ़ंक्शन या विधि के लिए संदर्भ (यह मान) सेट करने देती है। हालाँकि, कॉल() और अप्लाई() के विपरीत, बाइंड() विधि तुरंत फ़ंक्शन को लागू नहीं करती है। इसके बजाय, यह आपके द्वारा निर्दिष्ट ऑब्जेक्ट पर इस मान सेट के साथ एक नया फ़ंक्शन लौटाता है।

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

इस उदाहरण में, बाइंड() इस मान को व्यक्ति1 पर सेट करके एक नया फ़ंक्शन फ़ंक बनाता है। फ़ंक्शन को तुरंत नहीं बुलाया जाता है, लेकिन आप इसे बाद में "ओस्लो" और "नॉर्वे" तर्कों में पारित करके लागू कर सकते हैं।

उदाहरण: एकाधिक संदर्भों वाला केंद्रीकृत लॉगर

यहां एक छोटा लेकिन जटिल एप्लिकेशन उदाहरण है जहां कॉल(), अप्लाई(), या बाइंड() का उपयोग करने से दक्षता आती है - विशेष रूप से लॉगिंग उद्देश्यों के लिए कार्यों के आंशिक एप्लिकेशन को संभालने में:

मान लें कि आपके पास एक केंद्रीकृत लॉगिंग फ़ंक्शन है जो कार्रवाई करने वाले विभिन्न उपयोगकर्ताओं के बारे में जानकारी लॉग करता है। बाइंड() का उपयोग करने से आप दोहराए जाने वाले कोड से बचते हुए इस संदर्भ को विभिन्न उपयोगकर्ताओं के लिए कुशलतापूर्वक सेट कर सकते हैं।

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

यह कुशल क्यों है:

संदर्भ पुन: उपयोग: हर बार जब आप कोई कार्रवाई लॉग करते हैं तो आपको उपयोगकर्ता संदर्भ को मैन्युअल रूप से पास करने की आवश्यकता नहीं होती है। संदर्भ (यह) एक बार बंधा हुआ है, और लॉगिंग पुन: प्रयोज्य और साफ हो जाती है।

मॉड्यूलैरिटी: यदि आपको अधिक उपयोगकर्ताओं या कार्यों को जोड़ने की आवश्यकता है, तो आप अपने कोड को सूखा रखते हुए, फ़ंक्शन में बदलाव किए बिना उन्हें तुरंत लॉगर से बांध सकते हैं (खुद को दोहराएं नहीं)।