जावास्क्रिप्ट कीवर्ड शुरुआती के लिए

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

यह क्या है?

मैं आपके ध्यान में this की अपनी परिभाषा लाता हूँ। This जावास्क्रिप्ट में उपयोग किया जाने वाला एक कीवर्ड है जिसका एक विशेष अर्थ है, यह उस संदर्भ पर निर्भर करता है जिसमें इसका उपयोग किया जाता है।

यह कारण newbies के लिए इतना भ्रम पैदा करता है क्योंकि इसके उपयोग के आधार पर this परिवर्तन का संदर्भ है।

This एक गतिशील कीवर्ड माना जा सकता है। मुझे पसंद है कि इस संदर्भ में "संदर्भ" की अवधारणा को रेयान मॉर द्वारा कैसे प्रकट किया गया है। उनके अनुसार, संदर्भ हमेशा this का मूल्य होता है, जो एक ऑब्जेक्ट को संदर्भित करता है जो वर्तमान में निष्पादित कोड का "मालिक" है। हालाँकि, इससे संबंधित संदर्भ निष्पादन संदर्भ के समान नहीं है।

इसलिए, जब हम this कीवर्ड का उपयोग करते हैं, तो हम वास्तव में, इसकी सहायता से किसी वस्तु का संदर्भ लेते हैं। आइए बात करते हैं कि यह वस्तु क्या है, कुछ उदाहरणों की जांच की।

स्थिति जब यह एक खिड़की वस्तु को इंगित करता है

यदि आप this को वैश्विक दायरे में एक्सेस करने का प्रयास करते हैं, तो यह ब्राउज़र में window ऑब्जेक्ट के लिए वैश्विक संदर्भ के लिए बाध्य होगा।

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

इस कोड को निष्पादित करने का प्रयास करें, उदाहरण के लिए, ब्राउज़र कंसोल में:

 console.log(this); //     Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } //   myFunction(); //      Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} 

किसी वस्तु के अंदर इसका उपयोग करना

जब this किसी ऑब्जेक्ट के अंदर उपयोग किया जाता है, तो यह कीवर्ड ऑब्जेक्ट को संदर्भित करता है। एक उदाहरण पर विचार करें। मान लीजिए कि आपने विधियों के साथ एक dog ऑब्जेक्ट बनाया है और इसे अपने तरीकों में से एक कहा है। जब this पद्धति के अंदर this उपयोग किया जाता है, तो यह कीवर्ड dog ऑब्जेक्ट का प्रतिनिधित्व करता है।

 var dog = { name: 'Chester', breed: 'beagle', intro: function(){   console.log(this); } }; dog.intro(); //      dog       // {name: "Chester", breed: "beagle", intro: ƒ} //    breed:"beagle" //    intro:ƒ () //    name:"Chester" //    __proto__:Object 

यह और नेस्टेड ऑब्जेक्ट्स

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

 var obj1 = { hello: function() {   console.log('Hello world');   return this; }, obj2: {     breed: 'dog',     speak: function(){           console.log('woof!');           return this;       }   } }; console.log(obj1); console.log(obj1.hello());  //  'Hello world'   obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak());  //  'woof!'   obj2 

तीर के कार्य

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

 var objReg = { hello: function() {   return this; } }; var objArrow = {   hello: () => this }; objReg.hello(); // ,   ,  objReg objArrow.hello(); //   Window! 

यदि, हाथ में समस्या से हैरान, एमडीएन को देखें , तो आप यह जानकारी पा सकते हैं कि एरो फ़ंक्शंस में कार्यात्मक अभिव्यक्तियों की तुलना में लेखन का एक छोटा रूप है और यह अपने स्वयं के संस्थानों से नहीं जुड़ा हुआ है, this arguments , super या new.target । एरो फ़ंक्शंस ऑब्जेक्ट फ़ंक्शंस के बजाय सामान्य फ़ंक्शंस के रूप में उपयोग करने के लिए सबसे उपयुक्त हैं, उन्हें कंस्ट्रक्टर के रूप में उपयोग नहीं किया जा सकता है।

हम MDN को सुनेंगे और ऑब्जेक्ट फ़ंक्शन के रूप में एरो फ़ंक्शंस का उपयोग नहीं करेंगे।

नियमित कार्यों में इसका उपयोग करना

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

 function test() { console.log('hello world'); console.log(this); } test(); // hello world // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} 

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

 function test() { 'use strict'; return this; } console.log( test() ); //  undefined,    Window 

एक फ़ंक्शन से इसे कॉल करना जो ऑब्जेक्ट के बाहर घोषित किया गया था और फिर इसकी विधि के रूप में असाइन किया गया था

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

 var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo(); //    Beagles loves chasing rabbits. chase(); //      

कीवर्ड नया और यह

इस कीवर्ड का उपयोग ऑब्जेक्ट बनाने के लिए उपयोग किए जाने वाले निर्माण कार्यों में किया जाता है, क्योंकि यह अनुमति देता है, एक सार्वभौमिक तरीके से, ऐसे फ़ंक्शन का उपयोग करके बनाई गई कई ऑब्जेक्ट्स के साथ काम करने के लिए। जावास्क्रिप्ट में मानक निर्माण कार्य भी हैं, जिसके साथ, उदाहरण के लिए, आप प्रकार Number या String की वस्तुएँ बना सकते हैं। प्रोग्रामर द्वारा अपने दम पर निर्धारित किए गए इसी तरह के कार्य, उसे उन वस्तुओं को बनाने की अनुमति देते हैं जिनकी गुणों और विधियों की संरचना स्वयं द्वारा निर्धारित की जाती है।

जैसा कि आप पहले से ही समझ चुके हैं, मुझे कुत्ते पसंद हैं, इसलिए हम Dog जैसी वस्तुओं को बनाने के लिए एक निर्माण कार्य का वर्णन करेंगे जिसमें कुछ गुण और विधियाँ शामिल हैं।

 function Dog(breed, name, friends){   this.breed = breed;   this.name = name;   this.friends = friends;   this.intro = function() {       console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`);       return this;   }; } 

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

यहाँ मानक जावास्क्रिप्ट कन्स्ट्रक्टर के साथ काम करने का तरीका बताया गया है।

 var str = new String('Hello world'); /*******    ,     ,  ,     str2 .        ,   JavaScript   ,   ,    ,      .        .  ,  ,  ,   ,           . *******/ var str2 = 'Hello world'; //    , ,  ,        

अब नए बने Dog कंस्ट्रक्टर फंक्शन के साथ काम करते हैं।

 //      Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro();        //  Hi, my name is Chester and I'm a beagle console.log(chester);   //  Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ} 

निर्माण कार्यों का उपयोग करने का एक और उदाहरण यहां दिया गया है।

 var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() {   console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City(); //     console.log(phoenix); //       phoenix.sentence(); //  I live in Phoenix, AZ. var spokane = new City('Spokane', 'WA'); console.log(spokane); //    spokane.sentence(); //  I live in Spokane, WA. 

नए कीवर्ड के महत्व के बारे में

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

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

 // - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){  //   ,  ,    this  // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } //          Friend,    new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); //    greeting  john john.greeting = sayHello; //     console.log( john.greeting() ); //   ,  sayHello()       console.log( sayHello() ) ; 

परिणाम

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

प्रिय पाठकों! क्या आपको जावास्क्रिप्ट में इस कीवर्ड को समझने में कठिनाई हुई है?