यह जावास्क्रिप्ट:इसे एक बार और सभी के लिए समझें

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

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

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

वास्तव में यह क्या है?

सीधे शब्दों में कहें, यह एक सूचक है, यह संदर्भित करने का एक तरीका है कि जावास्क्रिप्ट कोड में किस वस्तु को फ़ंक्शन या विधि कहा जाता है। आम आदमी के शब्दों में, यह बिंदु के बाईं ओर क्या है।

इसके दो मुख्य उपयोग हैं। आइए कुछ उदाहरणों के साथ उन्हें एक्सप्लोर करें।

इस से वस्तुओं का निर्माण करना

function Book(title, author, genre) {
  this.title = title;
  this.author = author;
  this.genre = genre;
}
const book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");
const book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");
 
console.log(book1);
console.log(book2);

उपरोक्त कोड निम्न आउटपुट उत्पन्न करता है:

यहां, हमने एक कंस्ट्रक्टर फ़ंक्शन को परिभाषित किया है जिससे हम पुस्तक ऑब्जेक्ट बनाते हैं जो एक शीर्षक, एक लेखक और एक शैली को मापदंडों के रूप में लेते हैं।

एक कंस्ट्रक्टर फ़ंक्शन एक ऑब्जेक्ट "ब्लूप्रिंट" फ़ंक्शन है जिससे हम दिए गए नाम (हमारे मामले में पुस्तक) की वस्तुओं को बना सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

अंत में हमने myBook लॉग इन किया, और ऑब्जेक्ट को उसके संबंधित गुणों के साथ वापस ले लिया। इस तरह, हमारे द्वारा बनाई गई प्रत्येक नई पुस्तक वस्तु को पास किए गए मान दिए जाते हैं।

इस इस से प्रॉपर्टी एक्सेस करना :

const girl = {
  name: "Sarah",
  age: 26,
  introduce() {
    console.log(
      "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."
    );
  },
};

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

फ़ंक्शन ऑब्जेक्ट के गुणों का उपयोग करके एक परिचयात्मक वाक्य लॉग करता है, उन्हें इस के साथ एक्सेस करता है .wanted_property.

यह और जावास्क्रिप्ट में दायरा

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

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

आप जो कुछ भी "खुले में" लिखते हैं, उसे आप ऐसे पढ़ सकते हैं जैसे कि कोई खिड़की हो। इसके पहले लिखा है। आइए इस कोड स्निपेट पर एक नज़र डालें:

function returnThis() {
  return this;
}

पहले हम वैश्विक दायरे में returnThis नामक एक फ़ंक्शन को परिभाषित करते हैं जो इस . का मान लौटाता है . फिर हम इसे returnThis() . लिखकर कहते हैं .

चूंकि यह विश्व स्तर पर है, इसलिए हम इसे window.returnThis() . के रूप में देख सकते हैं , जो हमें वह लौटाता है जो बिंदु के बाईं ओर है।

ऑब्जेक्ट फ़ंक्शंस a.k.a. तरीके

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

const object = {
  returnThis() {
    return this;
  },
};
object.returnThis();

इस इस . की समझ और इसके तीन समाधान हैं

यदि कोई फ़ंक्शन किसी वस्तु से सीधे जुड़ा नहीं है, तो यह फ़ंक्शन के अंदर वैश्विक वस्तु को संदर्भित करेगा।

const weirdBehaviorObject = {
        directlyTiedFunction() {
          return this;
        },
        directlyTiedOuterFunction() {
          return function indirectNestedFunction() {
            return this;
          };
        },
      };

आइए इसे ब्राउज़र में चलाएं और देखें कि हमें क्या मिलता है:

हमने एक ऑब्जेक्ट को एक फ़ंक्शन के साथ परिभाषित किया है जो यह returning लौटाता है फिर से, और दूसरा जो एक आंतरिक फ़ंक्शन देता है, जो तब यह . लौटाता है .

जब हम indirectNestedFunction को कॉल करना चाहते हैं, तो हम सबसे पहले () . लिखते हैं एक बार बाहरी फ़ंक्शन को कॉल करने के लिए जो आंतरिक लौटाता है।

फिर हम इनर को दूसरे () . के साथ कॉल करते हैं जो खिड़की लौटाता है।

यह जावास्क्रिप्ट के रहस्यमय व्यवहारों में से एक है, और यह कुछ अप्रत्याशित और अवांछित आश्चर्य का रास्ता देता है।

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

#1 इसका समाधान बंद होने के साथ

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

const objectWithClosure = {
        closureFunction() {
          const self = this;
          return function enclosedFunction() {
            return self;
          };
        },
      };

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

#2 इसे हल करना इसे तीर कार्यों के साथ

दूसरा समाधान यकीनन ES6 के साथ आने वाली सबसे अच्छी सुविधाओं में से एक का उपयोग कर रहा है, जो कि तीर के कार्य हैं।

एरो फ़ंक्शंस लेखन कार्यों के लिए अधिक संक्षिप्त सिंटैक्स का प्रतिनिधित्व करते हैं। इसके अलावा, वे यह, . देखने के लिए एक स्तर ऊपर की ओर देखेंगे उस फ़ंक्शन में अर्थ जिसमें यह निहित है।

तो अगर हम अपनी वस्तु को इस प्रकार परिभाषित करते हैं:

const arrowFunctionObject = {
        outerFunc() {
          return () => this;
        },
      };

हम देख सकते हैं कि एरो फ़ंक्शन वास्तविक वस्तु देता है, न कि विंडो।

ऐसा इसलिए है क्योंकि यह उस बाहरी फ़ंक्शन को देखता है जिसे इसे कहा जाता है, जहां यह . है एरोफंक्शनऑब्जेक्ट को संदर्भित करता है। इसलिए, एरो फ़ंक्शंस में एक तरह का बिल्ट-इन क्लोजर होता है।

नेस्टेड तीर कार्य करता है

बेशक, यह जावास्क्रिप्ट है, इसलिए यहाँ एक और गोचा है। यह कुछ ऐसा है जो आप शायद तकनीकी साक्षात्कार के बाहर कभी नहीं पाएंगे, लेकिन यह जानने के लिए पर्याप्त कारण है।

क्या होता है यदि हम एक नियमित फ़ंक्शन के अंदर एक तीर फ़ंक्शन को घोंसला बनाते हैं, और फिर से किसी अन्य फ़ंक्शन के अंदर? यह इस तरह दिख रहा है:

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          };
        },
      };

हमारे ऑब्जेक्ट में एक बाहरी फ़ंक्शन होता है, जिसे कॉल करने पर, आंतरिक, नियमित फ़ंक्शन लौटाता है।

फिर हम रेगुलर फंक्शन को कॉल करते हैं और यह अंतरतम एरो फंक्शन लौटाता है।

अब, इसे कॉल करते समय, यह विंडो ऑब्जेक्ट देता है।

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

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

const nestedArrowFunctionObject = {
        outerFunction() {
          return () => {
            return () => this;
          };
        },
      };

इस मामले में आंतरिक तीर फ़ंक्शन बाहरी तक दिखता है। बाहरी भी एक तीर फ़ंक्शन है इसलिए यह एक और स्तर को देखता है। नियमित बाहरी कार्य सीधे कॉलिंग से जुड़ा होता है

वस्तु, और परिणामस्वरूप, वस्तु वही है जो इस . के रूप में वापस आती है .

#3 इसे हल करना इसे बाइंड विधि के साथ

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

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          }.bind(arrowNestedInRegularFunctionObject);
        },
      };

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

यह जब आप जावास्क्रिप्ट को समझते हैं तो यह इतना कठिन नहीं है

ओह! वह काफी गोता था। अब, आप पूछ सकते हैं, इस . के साथ सभी परेशानी और भ्रम क्यों ?

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

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

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

हम इस . के साथ किसी वस्तु के गुणों को उजागर करने और उनमें हेरफेर करने के तरीके भी बना सकते हैं .वांटेड_प्रॉपर्टी।

हम जावास्क्रिप्ट की विचित्रताओं के आसपास काम कर सकते हैं, और इसके व्यवहार को आत्मविश्वास से नियंत्रित कर सकते हैं, और अपेक्षित परिणाम दे सकते हैं।

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

आपको यह मिला है !