जावास्क्रिप्ट "इस" कीवर्ड को समझना

क्या करता है यह जावास्क्रिप्ट में कीवर्ड का क्या मतलब है? और आप इसे अपने जावास्क्रिप्ट प्रोग्राम में व्यावहारिक रूप से कैसे उपयोग कर सकते हैं? ये कुछ सामान्य प्रश्न हैं जिनके बारे में नए लोग और यहां तक ​​कि कुछ अनुभवी जावास्क्रिप्ट डेवलपर भी पूछते हैं यह कीवर्ड.

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

"यह" वैश्विक दायरे के अंदर

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

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

यदि आप उपरोक्त कोड चलाते हैं, तो आपको विंडो ऑब्जेक्ट मिलेगा।

"यह" आंतरिक कार्य (तरीके)

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

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

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

यह है मुझे आपत्ति, ऐसा कह रहे हैं इस नाम के अंदर नाम बोलो विधि बिल्कुल वैसी ही है मेरे नाम.

इसके बारे में सोचने का दूसरा तरीका यह है कि फ़ंक्शन के बाईं ओर जो कुछ भी है वह लागू होने पर होगा यह. इसका मतलब है कि आप इसका पुन: उपयोग कर सकते हैं नाम बोलो विभिन्न वस्तुओं में कार्य करें और यह हर बार एक बिल्कुल अलग संदर्भ का उल्लेख होगा।

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

functiontalk() {
returnthis
}
talk() // returns the window object

कॉलिंग बात करना() कॉल करने के समान ही है विंडो.टॉक(), और जो कुछ भी फ़ंक्शन के बाईं ओर है वह स्वचालित रूप से बन जाएगा यह.

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

Function.bind() के साथ "इस" का उपयोग करना

ऐसे परिदृश्य हो सकते हैं जहां आप किसी ऑब्जेक्ट में फ़ंक्शन को एक विधि के रूप में नहीं जोड़ सकते (जैसा कि पिछले अनुभाग में है)।

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

निम्नलिखित उदाहरण में, नाम बोलो फ़ंक्शन कोई विधि नहीं है मुझे ऑब्जेक्ट, लेकिन आप अभी भी इसका उपयोग करके इसे बाध्य कर रहे हैं बाँध() समारोह:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

आप जिस भी वस्तु से गुजरें बाँध() के मान के रूप में उपयोग किया जाएगा यह उस फ़ंक्शन कॉल में।

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

Function.call() के साथ "इस" का उपयोग करना

क्या होगा यदि आप एक बिल्कुल नया फ़ंक्शन वापस नहीं करना चाहते हैं, बल्कि फ़ंक्शन को उसके संदर्भ में बाइंड करने के बाद कॉल करना चाहते हैं? उसके लिए समाधान है पुकारना() तरीका:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

पुकारना() विधि किसी अन्य फ़ंक्शन को वापस करने के बजाय फ़ंक्शन को तुरंत निष्पादित करती है।

यदि फ़ंक्शन को पैरामीटर की आवश्यकता है, तो आप इसे इसके माध्यम से पास कर सकते हैं पुकारना() तरीका। निम्नलिखित उदाहरण में, आप भाषा को आगे बढ़ा रहे हैं नाम कहो() फ़ंक्शन, ताकि आप इसका उपयोग सशर्त रूप से विभिन्न संदेशों को वापस करने के लिए कर सकें:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

जैसा कि आप देख सकते हैं, आप किसी भी पैरामीटर को फ़ंक्शन के दूसरे तर्क के रूप में पास कर सकते हैं पुकारना() तरीका। आप जितने चाहें उतने पैरामीटर भी पास कर सकते हैं।

आवेदन करना() विधि बहुत समान है पुकारना() और बाँध(). अंतर केवल इतना है कि आप कई तर्कों को अल्पविराम से अलग करके पारित करते हैं पुकारना(), जबकि आप एक सरणी के अंदर कई तर्क पास करते हैं आवेदन करना().

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

"यह" इनसाइड कंस्ट्रक्टर फ़ंक्शंस

यदि आप किसी फ़ंक्शन को a के साथ कॉल करते हैं नया कीवर्ड, यह एक बनाता है यह ऑब्जेक्ट करें और उसे लौटाएँ:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

उपरोक्त कोड में, आपने एक ही फ़ंक्शन से तीन अलग-अलग ऑब्जेक्ट बनाए। नया कीवर्ड स्वचालित रूप से बनाई जा रही वस्तु और के बीच एक बाइंडिंग बनाता है यह फ़ंक्शन के अंदर कीवर्ड.

"यह" इनसाइड कॉलबैक फ़ंक्शंस

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

यह जब कॉलबैक फ़ंक्शंस के अंदर उपयोग किया जाता है तो कीवर्ड एक पूरी तरह से अलग संदर्भ को संदर्भित करता है:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

कॉल करने के एक सेकंड बाद व्यक्ति कंस्ट्रक्टर फ़ंक्शन और एक नया निर्माण मुझे ऑब्जेक्ट, यह विंडो ऑब्जेक्ट को मान के रूप में लॉग करेगा यह. इसलिए जब कॉलबैक फ़ंक्शन में उपयोग किया जाता है, यह विंडो ऑब्जेक्ट को संदर्भित करता है न कि "निर्मित" ऑब्जेक्ट को।

इसे ठीक करने के दो तरीके हैं। पहली विधि का उपयोग कर रहा है बाँध() बाँधने के लिए व्यक्ति नवनिर्मित वस्तु पर कार्य करें:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

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

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

"यह" इनसाइड एरो फ़ंक्शंस

एरो फ़ंक्शंस नियमित फ़ंक्शंस से भिन्न होते हैं. आप अपने कॉलबैक फ़ंक्शन को एरो फ़ंक्शन बना सकते हैं। तीर फ़ंक्शन के साथ, अब आपको इसकी आवश्यकता नहीं है बाँध() क्योंकि यह स्वचालित रूप से नवनिर्मित वस्तु से जुड़ जाता है:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

जावास्क्रिप्ट के बारे में और जानें

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