जावास्क्रिप्ट में एरो फ़ंक्शन और 'this' कीवर्ड

होम » अजगर » जावास्क्रिप्ट में एरो फ़ंक्शन और 'this' कीवर्ड

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

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

बिना किसी भ्रम के एरो फंक्शन का सिंटैक्स

एरो फंक्शन, फंक्शन एक्सप्रेशन होते हैं जिन्हें तीर के निशान के साथ लिखा जाता है। => वाक्यविन्यास के बजाय function कीवर्ड। सैद्धांतिक रूप से, आप इन्हें इस तरह समझ सकते हैं कि ये एक संक्षिप्त तरीका है यह लिखने का: "इन मापदंडों को लें, इस अभिव्यक्ति या कोड के ब्लॉक का मूल्यांकन करें, और एक मान लौटाएँ।" मूल रूप से, ये अभी भी फ़ंक्शन ही हैं, लेकिन कई महत्वपूर्ण तरीकों से इनका व्यवहार भिन्न होता है।

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

const multiplyByTwo = function (value) { return value * 2; };

इसे इस प्रकार एरो फंक्शन के रूप में पुनः लिखा जा सकता है:

const multiplyByTwo = (value) => { return value * 2; };

जब बॉडी एक सिंगल एक्सप्रेशन होती है, तब एरो फंक्शन्स का प्रभाव स्पष्ट रूप से दिखाई देता है। यदि बॉडी केवल एक स्टेटमेंट है जो कुछ रिटर्न करता है, तो आप कर्ली ब्रेसेस और एक्सप्लिसिट दोनों को हटा सकते हैं। return, जिससे अप्रत्यक्ष वापसी संभव हो पाती है:

const multiplyByTwo = value => value * 2;

जब केवल एक ही पैरामीटर हो, तो आप कोष्ठकों को छोड़ सकते हैं, लेकिन केवल उसी विशिष्ट स्थिति में। So x => x * 2 यह मान्य है, लेकिन यदि आपके पास शून्य या एकाधिक पैरामीटर हैं तो आपको कोष्ठक रखना होगा:

• शून्य पैरामीटर: () => 42
• एक पैरामीटर: x => x * 2 or (x) => x * 2
• दो या दो से अधिक पैरामीटर: (x, y) => x + y

जब आपको बॉडी में एक से अधिक वाक्यों की आवश्यकता हो, तो आपको कर्ली ब्रैकेट्स और एक स्पष्ट return. उस स्थिति में, एरो फ़ंक्शन रिटर्न के संबंध में नियमित फ़ंक्शन की तरह व्यवहार करते हैं: नहीं returnकोई मान नहीं लौटाया गया।

const feedCat = (status) => {
if (status === 'hungry') {
return 'Feed the cat';
} else {
return 'Do not feed the cat';
}
};

एरो फंक्शन से ऑब्जेक्ट लिटरल लौटाते समय सावधान रहें, क्योंकि ऑब्जेक्ट के ब्रेसेस को फंक्शन बॉडी के साथ भ्रमित किया जा सकता है। उस अस्पष्टता से बचने के लिए, ऑब्जेक्ट लिटरल को कोष्ठकों में लपेटें ताकि जावास्क्रिप्ट को पता चले कि यह एक एक्सप्रेशन है जिसे वापस किया जाना है:

const toObject = value => ({ result: value });

एक और बात: एरो फंक्शन हमेशा एक्सप्रेशन होते हैं, कभी भी डिक्लेरेशन नहीं होते। इसका मतलब है कि उन्हें किसी वेरिएबल, प्रॉपर्टी को असाइन किया जाना चाहिए या आर्गुमेंट के रूप में पास किया जाना चाहिए; वे अकेले नहीं रह सकते। function myFunc() {}और उन्हें फंक्शन डिक्लेरेशन की तरह होस्ट नहीं किया जाता है, इसलिए आप उन्हें परिभाषित होने से पहले कॉल नहीं कर सकते।

वास्तव में है क्या this जावास्क्रिप्ट में?

कीवर्ड this यह एक डायनामिक बाइंडिंग है जिसे जावास्क्रिप्ट किसी फंक्शन या क्लास मेथड को एक्जीक्यूट करते समय आपके लिए बनाता है। आप इसे एक अदृश्य पैरामीटर मान सकते हैं जिसका मान इस बात पर निर्भर करता है कि फ़ंक्शन को कैसे और कहाँ कॉल किया जाता है। यही बात इसे शक्तिशाली और लचीला बनाती है, लेकिन साथ ही भ्रम का एक बड़ा स्रोत भी।

एक गैर-सख्त फ़ंक्शन में, this यह हमेशा किसी न किसी प्रकार की वस्तु में परिवर्तित होता है; सख्त मोड में यह शाब्दिक रूप से कोई भी मान हो सकता है, जिसमें शामिल हैं undefined. जावास्क्रिप्ट निष्पादन संदर्भ के आधार पर उस मान का निर्धारण करता है: नियमित फ़ंक्शन, विधि कॉल, कंस्ट्रक्टर कॉल, क्लास, वैश्विक स्कोप या एरो फ़ंक्शन।

एक क्लासिक स्क्रिप्ट के शीर्ष स्तर पर (मॉड्यूल पर नहीं), this को संदर्भित करता है globalThisजो आमतौर पर ब्राउज़र का होता है window वस्तु। इसलिए ब्राउज़र में निम्नलिखित तुलना सही होगी:

console.log(this === window); // true

उन फ़ंक्शनों में जो एरो फ़ंक्शन नहीं हैं, this यह पूरी तरह से कॉल साइट द्वारा निर्धारित होता है। अगर आप कॉल करते हैं obj.method()फिर अंदर method के मूल्य this is objयदि आप उसी फ़ंक्शन को लें और उसे स्टैंडअलोन के रूप में कॉल करें fn() सख्त मोड में, this हो जाता है undefinedनॉन-स्ट्रिक्ट मोड में, जावास्क्रिप्ट "प्रतिस्थापित" करता है। this साथ में globalThis.

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

नियंत्रण के लिए उपकरण भी मौजूद हैं this स्पष्ट रूप से: call, apply, bind, तथा Reflect.apply. इनसे आप वांछित पदार्थ को "इंजेक्ट" कर सकते हैं। this मूल्य: fn.call(obj, arg1, arg2) निष्पादित करेंगे fn साथ में this करने के लिए सेट objनॉन-स्ट्रिक्ट मोड में भी प्रतिस्थापन के वही नियम लागू होते हैं: यदि आप पास करते हैं null or undefined as thisउन्हें बदल दिया जाता है globalThisप्रिमिटिव्स को उनके रैपर ऑब्जेक्ट्स में बॉक्स किया जाता है।

कॉलबैक अप्रत्यक्षता की एक और परत जोड़ते हैं, क्योंकि this इसका नियंत्रण उस व्यक्ति द्वारा किया जाता है जो आपके कॉलबैक को कॉल करता है। ऐरे पुनरावृति विधियाँ, Promise कंस्ट्रक्टर और इसी तरह के API आमतौर पर कॉलबैक को कॉल करते हैं। this करने के लिए सेट undefined (या स्लोपी मोड में ग्लोबल ऑब्जेक्ट)। कुछ API, जैसे Array.prototype.forEach or Set.prototype.forEachएक अलग स्वीकार करें thisArg आप कॉलबैक को सेट करने के लिए इस पैरामीटर का उपयोग कर सकते हैं। this.

अन्य एपीआई जानबूझकर कस्टम कॉलबैक को कॉल करते हैं this मूल्यों. उदाहरण के लिए, reviver करने के लिए तर्क JSON.parse और replacer एसटी JSON.stringify प्राप्त करना this वर्तमान में संसाधित की जा रही प्रॉपर्टी के स्वामी ऑब्जेक्ट से बंधे होते हैं। DOM में इवेंट हैंडलर, जब पारंपरिक तरीके से लिखे जाते हैं, तो उस एलिमेंट से बंधे होते हैं जिससे वे जुड़े होते हैं।

मूल विचार: एरो फंक्शन अपना स्वयं का एरो फंक्शन नहीं बनाते हैं। this

एरो फंक्शन की मुख्य विशेषता यह है कि वे कभी भी नया ऑब्जेक्ट नहीं बनाते हैं। this बंधन। इसके बजाय, वे इसे बंद कर देते हैं (या "कब्जा कर लेते हैं")। this ये मान बनने के समय आसपास के शाब्दिक वातावरण से प्राप्त होते हैं। बाद में जब तीर क्रिया चलती है, तो यह उस प्राप्त मान का पुनः उपयोग करती है, चाहे आप इसे किसी भी तरह से कॉल करें।

व्यवहार में, एक एरो फ़ंक्शन इस तरह व्यवहार करता है मानो वह स्थायी रूप से स्वतः ही इससे बंधा हुआ हो। this इसके बाहरी दायरे का। इसीलिए इस तरह के तरीके call, apply, तथा bind बदल नहीं सकता this एरो फंक्शन के लिए: thisArg तर्क को पूरी तरह से अनदेखा कर दिया जाता है। आप अभी भी उनके माध्यम से सामान्य पैरामीटर पास कर सकते हैं, लेकिन this मान लॉक है।

स्क्रिप्ट फ़ाइल के वैश्विक दायरे में इस कोड स्निपेट पर विचार करें:

const arrow = () => console.log(this);
arrow();

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

सबसे दिलचस्प व्यवहार तब देखने को मिलता है जब आप नियमित फ़ंक्शन या विधियों के अंदर एरो फ़ंक्शन को नेस्ट करते हैं। क्योंकि तीर बाहरी फ़ंक्शन को पकड़ लेता है thisयह उन कॉलबैक के लिए एक शक्तिशाली उपकरण बन जाता है जिन्हें सामान्य तरीके के बिना अपने कंटेनिंग ऑब्जेक्ट को संदर्भित करने की आवश्यकता होती है। .bind(this) समारोह।

const counter = {
id: 42,
start() {
setTimeout(() => {
console.log(this.id); // uses counter.id
}, 1000);
},
};

If start हम एक पारंपरिक अनाम फ़ंक्शन का उपयोग कर रहे थे setTimeoutआपको इसे मैन्युअल रूप से बांधना होगा। this या इसे किसी वेरिएबल में सेव कर लें। तीरों के साथ, कॉलबैक स्वाभाविक रूप से विरासत में प्राप्त करता है this से startहै, जो है counter, इतना this.id प्रिंट 42 जैसा सोचा वैसा।

यह शाब्दिक बंधन क्लासिक प्रश्न "ऐसा क्यों होता है" की व्याख्या भी करता है। this ऑब्जेक्ट लिटरल में तीरों का उपयोग करते समय "परिवर्तन" प्रश्न। इन दो वस्तुओं को देखिए:

const obj1 = {
speak() {
console.log(this);
}
};

const obj2 = {
speak: () => {
console.log(this);
}
};

कॉलिंग obj1.speak() प्रिंट obj1, क्योंकि speak यह एक नियमित विधि है और this यह कॉल साइट के आधार पर निर्धारित किया जाता है। इसके विपरीत, obj2.speak() बाहरी लॉग this (अक्सर window (ब्राउज़र में), क्योंकि तीर ऑब्जेक्ट को अपने रूप में उपयोग नहीं करता है। thisऑब्जेक्ट लिटरल स्वयं एक नया ऑब्जेक्ट नहीं बनाता है। this दायरा; केवल फ़ंक्शन का मुख्य भाग ही ऐसा करता है, और एरो फ़ंक्शन उस चरण को छोड़ देते हैं।

अब एक ऑब्जेक्ट मेथड पर विचार करें जो एक आंतरिक तीर बनाता है और तुरंत उसे कॉल करता है:

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

obj3.speak();

इस स्थिति में, आंतरिक तीर फ़ंक्शन विरासत में प्राप्त करता है this से speakहै, जो है obj3 जब कहा जाता है obj3.speak(). भले ही तीर एक नेस्टेड, तुरंत लागू होने वाला फ़ंक्शन हो, फिर भी यह इंगित करता है obj3वैश्विक वस्तु नहीं। यही शाब्दिक अर्थ का सार है। thisयह आसपास के क्षेत्र का अनुसरण करता है, न कि तीर के लक्ष्य स्थल का।

this फ़ंक्शन, ऑब्जेक्ट और कंस्ट्रक्टर के पार

एरो फंक्शन्स में महारत हासिल करने के लिए और thisइससे यह समझने में मदद मिलती है कि कैसे this यह हर प्रमुख संदर्भ में काम करता है: नियमित फ़ंक्शन, विधियाँ, कंस्ट्रक्टर, क्लास और वैश्विक स्कोप। एक बार जब वे नियम स्पष्ट हो जाते हैं, तो तीर के व्यवहार को समझना बहुत आसान हो जाता है।

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

किसी ऑब्जेक्ट लिटरल पर परिभाषित विधि में, this यह वह ऑब्जेक्ट है जिस पर मेथड को एक्सेस किया जाता है, जरूरी नहीं कि वह ऑब्जेक्ट हो जहां मेथड को मूल रूप से परिभाषित किया गया था। If obj.__proto__ इसमें एक मेथड है और आप उसे कॉल करते हैं। obj.method()फिर अंदर method, this is objप्रोटोटाइप नहीं।

कंस्ट्रक्टर एक और विशेष मामला है: जब आप किसी फ़ंक्शन को कॉल करते हैं new, this यह नए बनाए गए ऑब्जेक्ट इंस्टेंस से जुड़ा हुआ है। उदाहरण के लिए, में function User(name) { this.name = name; }, बुला रहा है new User('Alex') सेट this नए को User यदि कंस्ट्रक्टर स्पष्ट रूप से एक गैर-आदिम ऑब्जेक्ट लौटाता है, तो वह लौटाया गया ऑब्जेक्ट बदल जाता है। this अंतिम मूल्य के रूप में new अभिव्यक्ति।

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

व्युत्पन्न वर्ग के कंस्ट्रक्टर थोड़ा अलग व्यवहार करते हैं: जब तक आप उन्हें कॉल नहीं करते super()कोई उपयोगी नहीं है this. लागू super() आरंभ this बेस कंस्ट्रक्टर को डेलीगेट करके; डिराइव्ड कंस्ट्रक्टर में ऐसा करने से पहले रिटर्न करना तभी अनुमत है जब आप स्पष्ट रूप से एक अलग ऑब्जेक्ट रिटर्न करते हैं।

वैश्विक संदर्भ में, this यह इस बात पर निर्भर करता है कि जावास्क्रिप्ट वातावरण आपके कोड को कैसे रैप करता है और निष्पादित करता है। एक क्लासिक ब्राउज़र स्क्रिप्ट में, शीर्ष-स्तर this यह वैश्विक ऑब्जेक्ट है; एक ES मॉड्यूल में, शीर्ष-स्तर this हमेशा है undefinedNode.js CommonJS मॉड्यूल आंतरिक रूप से रैप किए जाते हैं और आमतौर पर इसके साथ निष्पादित होते हैं। this करने के लिए सेट module.exportsएचटीएमएल में इनलाइन इवेंट हैंडलर विशेषताएँ निष्पादित होती हैं। this उन्हें उस तत्व पर सेट किया जाता है जिससे वे जुड़े होते हैं।

एक सूक्ष्म लेकिन महत्वपूर्ण बात: ऑब्जेक्ट लिटरल स्वयं कोई नया अर्थ नहीं प्रस्तुत करते हैं। this गुंजाइश। लेखन const obj = { value: this }; स्क्रिप्ट के अंदर ऐसा होगा obj.value बाहरी के बराबर thisऑब्जेक्ट नहीं, बल्कि फंक्शन बॉडी (और क्लास बॉडी) एक समर्पित संरचना बनाते हैं। this बाइंडिंग; तीर जानबूझकर इस चरण को छोड़ देते हैं और विरासत में प्राप्त करते हैं।

कॉलबैक के लिए एरो फंक्शन क्यों बेहतरीन होते हैं (और कब नहीं)

क्योंकि तीर फ़ंक्शन बंद हो जाते हैं thisवे कई कॉलबैक परिदृश्यों के लिए एकदम उपयुक्त हैं जहां आप चाहते हैं कि कॉलबैक आसपास की वस्तु या संदर्भ को संदर्भित करता रहे। यह टाइमर, प्रॉमिस और ऐरे मेथड जैसे विकल्पों के साथ विशेष रूप से उपयोगी है। map, filter, तथा reduce.

एक ऐसे मेथड की कल्पना करें जिसे किसी प्रॉपर्टी को बार-बार अपडेट करने की आवश्यकता होती है। setInterval. पारंपरिक फ़ंक्शन का उपयोग करते हुए, this कॉलबैक के अंदर डिफ़ॉल्ट रूप से वैश्विक ऑब्जेक्ट (या हो सकता है) का उपयोग होगा undefined सख्त मोड में), इसलिए this.count यह आपके इंस्टेंस की ओर इशारा नहीं करेगा। एरो फंक्शन के साथ, कॉलबैक स्वाभाविक रूप से इसका उपयोग करता है। this बाहरी विधि का।

function Counter() {
this.count = 0;

setInterval(() => {
this.count++;
}, 1000);
}

तीर की बदौलत, this इंटरवल कॉलबैक के अंदर संदर्भित करता है Counter उदाहरण के लिए, नहीं window. अगर वह कॉलबैक एक सामान्य फ़ंक्शन होता, तो आपको या तो आवश्यकता होती .bind(this) या एक मध्यवर्ती चर जैसे const self = this; संदर्भ को बनाए रखने के लिए।

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

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

हालांकि, कुछ महत्वपूर्ण मामले ऐसे भी होते हैं जहां एरो फंक्शन गलत विकल्प होते हैं, खासकर जब आपको डायनामिक फ़ंक्शन की आवश्यकता होती है। this. दो क्लासिक एंटी-पैटर्न हैं: ऑब्जेक्ट मेथड के रूप में एरो फंक्शन का उपयोग करना और डीओएम इवेंट हैंडलर के रूप में उनका उपयोग करना जो निर्भर करते हैं। this तत्व होने के नाते।

मान लीजिए एक ऐसी वस्तु है जो बिल्ली के जीवन चक्र को ट्रैक करती है:

const cat = {
lives: 9,
jump: () => {
this.lives--; // bug: this is not cat
},
};

cat.jump();

जबसे jump यह एक तीर है, this इसका तात्पर्य यह नहीं है कि cat लेकिन जो भी हो this यहीं पर ऑब्जेक्ट लिटरल बनाया गया था (अक्सर ग्लोबल ऑब्जेक्ट)। इरादा this.lives-- या तो यह त्रुटि उत्पन्न करता है (सख्त मोड में) या चुपचाप किसी असंबंधित चीज़ में परिवर्तन कर देता है। यहाँ नियमित विधि सिंटैक्स का उपयोग करना सही कदम है।

DOM इवेंट लिसनर समान हैं: मानक पैटर्न this.classList.toggle('on') इवेंट कॉलबैक के अंदर निर्भर करता है this वह तत्व जिसने घटना को जन्म दिया। एरो फंक्शन के साथ, this अब यह एलिमेंट को इंगित नहीं करता है, इसलिए कोड टूट जाता है।

const button = document.getElementById('press');

button.addEventListener('click', () => {
this.classList.toggle('on'); // this is not button
});

इस स्थिति में हैंडलर एक सामान्य फ़ंक्शन होना चाहिए ताकि this ब्राउज़र द्वारा इसे बटन एलिमेंट से जोड़ा जाता है। यदि आपका लॉजिक अपेक्षा करता है तो एरो फ़ंक्शन सीधे प्रतिस्थापन के रूप में काम नहीं करते हैं। this गतिशील घटना लक्ष्य होना।

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

विशेष मामले: गेटर, सेटर, बाउंड मेथड और विषम कोने

गेटर और सेटर एक ही "कॉल साइट" नियम का पालन करते हैं: this यह वह ऑब्जेक्ट है जिस पर प्रॉपर्टी एक्सेस की जाती है, न कि वह जहां इसे मूल रूप से परिभाषित किया गया था। यदि कोई गेटर किसी प्रोटोटाइप से इनहेरिट किया गया है और आप इसे किसी व्युत्पन्न ऑब्जेक्ट पर कॉल करते हैं, this गेटर के अंदर व्युत्पन्न ऑब्जेक्ट को संदर्भित करता है।

बाउंड विधियाँ इसके साथ बनाई गई हैं Function.prototype.bind यह आपको एरो फंक्शन के समान व्यवहार प्रदान करता है, लेकिन सामान्य फंक्शन के स्तर पर। जब तुमने फोन किया f.bind(obj)आप एक नया फ़ंक्शन बनाते हैं जिसका this स्थायी रूप से तय किया गया है objचाहे इसे किसी भी तरह से इस्तेमाल किया जाए। यह उन क्लासों में उपयोगी हो सकता है जहाँ आपको डेटा को संरक्षित करने की आवश्यकता होती है। this भले ही कोई विधि अलग हो।

class Example {
constructor() {
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
console.log(this); // always the instance
}
}

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

कुछ ऐसे विशिष्ट मामले भी हैं जहां this अलग तरह से व्यवहार करता है, जैसे कि एक अप्रचलित के भीतर with बयान। अंदर एक with (obj) { ... } ब्लॉक, एक फ़ंक्शन को कॉल कर रहा है जो एक प्रॉपर्टी है obj यह प्रभावी रूप से ऐसा व्यवहार करता है मानो आपने लिखा हो obj.method(), इतना this स्वाभाविक है objआधुनिक कोड को इससे बचना चाहिए। withलेकिन इस अपवाद को समझने से यह स्पष्ट हो जाता है कि this यह अभी भी मूल रूप से इस बात पर निर्भर करता है कि फ़ंक्शन कॉल कैसे बनता है।

HTML में इनलाइन इवेंट हैंडलर के लिए एक विशेष नियम भी है: आसपास के इनलाइन हैंडलर कोड को यह दिखाई देता है। this तत्व के रूप में, लेकिन उस हैंडलर के अंदर परिभाषित आंतरिक फ़ंक्शन नियमित फ़ंक्शन पर वापस आ जाते हैं। this नियमों. इसलिए एक आंतरिक पारंपरिक कार्य, जो किसी भी चीज़ से बंधा नहीं है, आमतौर पर देखेगा this as globalThis (या undefined सख्त मोड में), तत्व नहीं।

अंत में, याद रखें कि एरो फ़ंक्शन में कोई prototype यह एक प्रॉपर्टी है और इसे कंस्ट्रक्टर के रूप में उपयोग नहीं किया जा सकता है। new. प्रयास कर रहा है new MyArrow() इससे TypeError उत्पन्न होगा। यदि आपको किसी ऐसे फ़ंक्शन की आवश्यकता है जो कंस्ट्रक्टर के रूप में कार्य कर सके, तो आपको एक सामान्य फ़ंक्शन या क्लास का उपयोग करना होगा।

इन विवरणों को ध्यान में रखने से एरो फंक्शन और पारंपरिक फंक्शन के बीच चयन करना बहुत आसान हो जाता है। जहां आपको शाब्दिक संकेत चाहिए, वहां तीरों का प्रयोग करें। this और संक्षिप्त सिंटैक्स, और जब भी आपको गतिशील, कॉल-साइट-संचालित कार्यों की आवश्यकता हो, तो नियमित कार्यों पर वापस आ जाएं। this व्यवहार या कंस्ट्रक्टर सिमेंटिक्स।

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