जावास्क्रिप्ट में यह कीवर्ड भ्रमित करने वाला हो सकता है क्योंकि यह नियमित कार्यों और तीर कार्यों में अलग-अलग व्यवहार करता है। इस ब्लॉग पोस्ट में, हम बताएंगे कि यह दोनों प्रकार के कार्यों में कैसे काम करता है, पता लगाएं कि ये अंतर क्यों मौजूद हैं, और जावास्क्रिप्ट में इसे समझने के लिए आपको आवश्यक बुनियादी ज्ञान प्रदान करेंगे।

नियमित कार्य

जावास्क्रिप्ट में नियमित फ़ंक्शन को फ़ंक्शन कीवर्ड का उपयोग करके परिभाषित किया जाता है। इन फ़ंक्शंस में इसका मान इस बात पर निर्भर करता है कि फ़ंक्शन को कैसे कॉल किया जाता है। यहां कई उदाहरण हैं:

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

• गैर-सख्त मोड:

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

  regularFunction(); // Logs the global object (window in browsers)

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

  • सख्त मोड:

  'use strict';

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

  regularFunction(); // Logs undefined

• स्पष्टीकरण: सख्त मोड में, यह तब अपरिभाषित रहता है जब किसी फ़ंक्शन को वैश्विक संदर्भ में कॉल किया जाता है, जो वैश्विक ऑब्जेक्ट में आकस्मिक संशोधनों को रोककर एक सुरक्षित वातावरण प्रदान करता है।

2. विधि कॉल

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

• उदाहरण:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• स्पष्टीकरण: इस मामले में, यह ओबीजे की ओर इशारा करता है क्योंकि फ़ंक्शन को ओबीजे की विधि कहा जाता है।

  • सख्त मोड: सख्त मोड में व्यवहार वही रहता है।

3. कंस्ट्रक्टर कॉल

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

• उदाहरण:

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

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• स्पष्टीकरण: जब नए के साथ कॉल किया जाता है, तो पर्सन कंस्ट्रक्टर फ़ंक्शन के अंदर यह बनाए जा रहे नए उदाहरण को संदर्भित करता है। प्रत्येक नए उदाहरण (व्यक्ति1 और व्यक्ति2) को अपनी स्वयं की नाम संपत्ति और सेहेलो विधि मिलती है।

  • सख्त मोड: सख्त मोड में व्यवहार वही रहता है।

4. स्पष्ट बंधन

आप इसे कॉल, अप्लाई या बाइंड का उपयोग करके स्पष्ट रूप से बाइंड कर सकते हैं।

• उदाहरण:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• स्पष्टीकरण: कॉल करें और लागू करें, इस सेट को ओबीजे के साथ तुरंत फ़ंक्शन को लागू करें, जबकि बाइंड एक नया फ़ंक्शन बनाता है जो स्थायी रूप से ओबीजे से जुड़ा होता है।

  • सख्त मोड: सख्त मोड में व्यवहार वही रहता है।

तीर के कार्य

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

1. शाब्दिक यह

एरो फ़ंक्शंस इसे उस दायरे से प्राप्त करते हैं जिसमें उन्हें परिभाषित किया गया है।

• गैर-सख्त मोड:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• स्पष्टीकरण: एरो फ़ंक्शन का अपना यह नहीं होता; वे इसका उपयोग आसपास के दायरे से करते हैं। यहां, यह वैश्विक वस्तु को संदर्भित करता है क्योंकि फ़ंक्शन को वैश्विक दायरे में परिभाषित किया गया है।

  • सख्त मोड:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• स्पष्टीकरण: सख्त मोड में, यदि आसपास का दायरा वैश्विक है, तो यह आसपास के दायरे से विरासत में मिला हुआ अपरिभाषित रहता है।

2. विधि कॉल

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

• उदाहरण:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

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

  • सख्त मोड: लॉग अपरिभाषित हैं, ओब्जेक्ट नहीं।

3. दूसरे फंक्शन के अंदर एरो फंक्शन

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

• उदाहरण:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• स्पष्टीकरण: इस मामले में, यह एरो फ़ंक्शन के अंदर बाहरी फ़ंक्शन के समान ही है, जो कि obj है।

  • सख्त मोड: सख्त मोड में व्यवहार वही रहता है।

4. इवेंट हैंडलर्स में एरो फंक्शन

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

• उदाहरण:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• स्पष्टीकरण: तीर फ़ंक्शन इसे बटन तत्व से नहीं जोड़ता है; यह इसे आस-पास के दायरे से विरासत में मिला है, जो कि वैश्विक दायरा है या सख्त मोड में अपरिभाषित है।

  • सख्त मोड: लॉग अपरिभाषित, बटन तत्व नहीं।

ये मतभेद क्यों?

नियमित फ़ंक्शन और एरो फ़ंक्शन के बीच अंतर इस बात पर निर्भर करता है कि वे इसे कैसे संभालते हैं:

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

समझने योग्य मुख्य अवधारणाएँ

जावास्क्रिप्ट में इसके व्यवहार को समझने के लिए, आपको निम्नलिखित अवधारणाओं को जानना होगा:

1. निष्पादन संदर्भ: वह संदर्भ जिसमें कोड निष्पादित किया जाता है, जो इसे निर्धारित करने के तरीके को प्रभावित करता है।
2. कॉल-साइट: कोड में वह स्थान जहां किसी फ़ंक्शन को कॉल किया जाता है, जो नियमित कार्यों में इसके मूल्य को प्रभावित करता है।
3. लेक्सिकल स्कोपिंग: यह आसपास के दायरे से तीर कार्यों में कैसे विरासत में मिला है।
4. सख्त मोड: कुछ संदर्भों में सख्त मोड इसके डिफ़ॉल्ट व्यवहार को कैसे बदलता है।

सारांश

• नियमित कार्य: यह गतिशील है और कॉल-साइट द्वारा निर्धारित होता है।
• एरो फ़ंक्शंस: यह शाब्दिक है और फ़ंक्शन परिभाषित होने पर आसपास के दायरे से निर्धारित होता है।

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