🚿 🧗🏿 🎇 C / C ++ / C # / Java प्रोग्रामर के लिए जावास्क्रिप्ट प्रोटोटाइप 🔥 🍘 👗

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

यह पाठ शुरुआत में या एपीसोडिक जावास्क्रिप्ट डेवलपर को यह बताने के लिए लिखा गया है कि जावास्क्रिप्ट में वस्तुओं को कैसे बनाया जाए, सरल "संरचनात्मक" से, सी में, अधिक "ऑब्जेक्ट-ओरिएंटेड" के रूप में, सी ++ / सी # / जावा में।

लेख को प्रोग्रामिंग में शुरुआती दोनों, और प्रोग्रामर को बैकेंड करने की सिफारिश की जा सकती है जो केवल कभी-कभी जावास्क्रिप्ट लिखते हैं।

C और C ++ में ऑब्जेक्ट्स और क्लासेस

वस्तुएँ ऐसी संस्थाएँ हैं जिनके पास है

पहचान (पहचान, एक वस्तु को दूसरे से अलग करने की क्षमता),
राज्य (राज्य, गुण, क्षेत्र),
और व्यवहार (व्यवहार, तरीके, कार्य जो राज्य बदल सकते हैं)।

विषय की शुरूआत में आसानी के लिए, वस्तुओं को उसी "वर्ग" के उदाहरणों के रूप में दर्शाया जा सकता है जो प्रोग्राम लॉन्च होने के बाद ही मेमोरी में मौजूद होते हैं।

कार्यक्रम के जीवन के दौरान वस्तुओं को उत्पन्न किया जा सकता है, बदल सकता है, गायब हो सकता है।

C और C ++ में सशर्त कोड की तुलना करें:

सी

struct Person { char *firstName; char *lastName; int yearOfBirth; } // Compute person's age in a given year. void computeAge(struct Person *person, int currentYear); // Set a new last name, possibly deallocating the old one. void setLastName(struct Person *person, char *newLastName);

सी ++

 class Person { char *firstName; char *lastName; int yearOfBirth; void computeAge(int currentYear); void setLastName(char *newLastName); }

इन उदाहरणों में, हमने C और C ++ में व्यक्ति वस्तु का वर्णन किया है। "एक वस्तु नहीं बनाई", लेकिन "इसके क्षेत्रों और विधियों का वर्णन किया", ताकि बाद में आप इस तरह की वस्तुओं को बना सकें और उनका उपयोग कर सकें।

C और C ++ में एक व्यक्ति वस्तु बनाने के लिए उपयुक्त तरीके भी देखें:

सी

 struct Person *p = malloc(sizeof(*p)); setLastName(p, "Poupkine"); printf("Person's age is %d\n", computeAge(p, 2013));

सी ++

 Person *p = new Person; p->setLastName("Poupkine"); printf("Person's age is %d\n", p->computeAge(2013));

ये दो कार्यक्रम एक ही काम करते हैं: वे एक ऑब्जेक्ट बनाते हैं और आपको setLastName , setLastName (व्यवहार) कार्यों का उपयोग करने की अनुमति देते हैं जो किसी वस्तु (राज्य) की स्थिति को बदलने या setLastName इसके साथ जुड़े हैं। हम किसी भी समय p (पहचान) सूचक के माध्यम से बनाई गई वस्तु तक पहुंच सकते हैं। यदि हम एक और Person *m = new Person वस्तु बनाते हैं, तो हम नई वस्तु के तरीकों का उपयोग m सूचक के माध्यम से कर सकते हैं। पॉइंटर्स p और m अलग-अलग ऑब्जेक्ट्स को इंगित करेगा, प्रत्येक अपने स्वयं के राज्य के साथ, समान तरीकों (व्यवहार) के सेट के साथ।

जैसा कि हम देख सकते हैं, यहां तक कि संबंधित भाषाओं सी और सी ++ व्यक्तिगत वस्तु का वर्णन करने के लिए थोड़ा अलग तरीके प्रदान करते हैं। एक मामले में, हम एक वस्तु को किसी struct Person डेटा संरचना और दोस्ताना कार्यों के माध्यम से बताते हैं। दूसरे मामले में, हम डेटा और फ़ंक्शंस दोनों को समान रूप से एक ही class Person में डालते हैं।

लोग C ++ और "ऑब्जेक्ट-ओरिएंटेड अप्रोच" को क्यों पसंद कर सकते हैं, क्योंकि हम C में "बिना वर्गों के", और C ++ में एक ही काम कर सकते हैं? कुछ अच्छे उत्तर हैं जो जावास्क्रिप्ट सीखने के संदर्भ में प्रासंगिक हैं, जिसमें आप C दृष्टिकोण और C ++ दृष्टिकोण दोनों का उपयोग कर सकते हैं:

नेमस्पेस (नामस्थान)। सी वेरिएंट में, हमने कम्प्यूटेज फ़ंक्शन को परिभाषित किया। यह फ़ंक्शन वैश्विक नामस्थान में स्थित है: यह पूरे कार्यक्रम के लिए "दृश्यमान" है। किसी अन्य स्थान पर, ऐसा फ़ंक्शन बनाना अब विफल हो जाता है। लेकिन क्या होगा अगर हम एक नई तरह की वस्तुएं बनाते हैं, कहते हैं, पोनी, और हम एक समान विधि बनाना चाहते हैं जो टट्टू की उम्र की गणना करता है? हमें न केवल एक नया ponyComputeAge () विधि बनाने की आवश्यकता है, बल्कि एकरूपता प्राप्त करने के लिए पुरानी पद्धति का भी नाम बदलें: personComputeAge ()। सामान्य तौर पर, हम नामस्थान को "अव्यवस्थित" करते हैं, जिससे नए प्रकार की वस्तुओं का निर्माण समय के साथ अधिक से अधिक जटिल हो जाता है। यदि हम एक कक्षा में ComputeAge () फ़ंक्शन को C ++ की तरह रखते हैं, तो हम विभिन्न वर्गों में कई समान कार्य कर सकते हैं। वे एक-दूसरे के साथ हस्तक्षेप नहीं करेंगे।
जानकारी छिपाना। सी संस्करण में, जिसके पास व्यक्तिगत संरचना के लिए एक सूचक पी है, वह ऑब्जेक्ट में किसी भी फ़ील्ड को बदल सकता है। उदाहरण के लिए, आप p-> yearOfBirth ++ कह सकते हैं। इसलिए करना - मनमाने ढंग से वस्तुओं के मनमाने क्षेत्रों को बदलना - बुरा व्यवहार माना जाता है। दरअसल, अक्सर आपको न केवल क्षेत्र को बदलने की जरूरत होती है, बल्कि वस्तु के कई क्षेत्रों को लगातार बदलने की भी। और यह एक विशेष प्रक्रिया (विधि) की तुलना में बेहतर और सही तरीके से कौन कर सकता है? इसलिए, बदलते क्षेत्रों को सीधे प्रतिबंधित करने में सक्षम होना सार्थक है, और उन्हें केवल उपयुक्त तरीकों का उपयोग करके परिवर्तित किया जा सकता है। सी में, यह मुश्किल है, इसलिए उनका उपयोग शायद ही कभी किया जाता है। लेकिन C ++ में ऐसा करना आसान है। यह निजी वस्तु की कुछ विशेषताओं को घोषित करने के लिए पर्याप्त है, और फिर उन्हें केवल कक्षा के तरीकों से ही एक्सेस किया जा सकता है:
```
 class Person { //       computeAge  setLastName: private: char *firstName; char *lastName; int yearOfBirth; //   ()  : public: void computeAge(int currentYear); void setLastName(char *newLastName); } 
```
एक इंटरफ़ेस बनाएँ। सी संस्करण में, हमें प्रत्येक वस्तु के लिए याद करने के लिए मजबूर किया जाता है कि इसके लिए उम्र कैसे प्राप्त करें। एक ऑब्जेक्ट के लिए हम ponyComputeAge() , दूसरे personComputeAge() लिए कॉल करेंगे। C ++ संस्करण में, हम बस यह याद रख सकते हैं कि किसी भी वस्तु की आयु की गणना computeAge() माध्यम से की जाती है। यही है, हम उम्र की गणना के लिए एक एकल इंटरफ़ेस पेश करते हैं, और इसे कई वस्तुओं में एक एप्लिकेशन में उपयोग करते हैं। यह सुविधाजनक है।

जावास्क्रिप्ट ऑब्जेक्ट्स और प्रोटोटाइप

जावास्क्रिप्ट प्रोग्रामर भी ऑब्जेक्ट प्रोग्रामिंग का लाभ उठाते हैं, लेकिन इसमें वस्तुओं का वर्णन करने के लिए एक सिंटैक्टिक तरीके के रूप में "कक्षाओं" का अभाव है।

भोला तरीका

जब हम किसी डेटा संरचना के माध्यम से किसी वस्तु का वर्णन करते हैं और डेटा पर काम करने वाले कार्यों का एक समूह का उपयोग करते हैं, तो हम जावास्क्रिप्ट में C दृष्टिकोण का उपयोग कर सकते हैं:

 function createPerson(first, last, born) { var person = { firstName: first, lastName: last, yearOfBirth: born }; return person; } function computeAge(p, currentYear) { return currentYear - p.yearOfBirth; } function setLastName(p, newLastName) { p.lastName = newLastName; } // Create a new person and get their age: var p = createPerson("Anne", "Hathaway", 1982); console.log(p); console.log(computeAge(p, 2013));

node कोड में इस सभी कोड को कॉपी करने की कोशिश करें ( Node.JS प्रोजेक्ट को प्री-इंस्टॉल करना) और देखें कि यह आउटपुट क्या है।

हम नाम स्थान को कचरा करते हैं

लेकिन इस विधि में सी वेरिएंट की कमियां हैं जैसा कि ऊपर बताया गया है। आइए फिर से कोशिश करें, लेकिन केवल इस बार हम ऑब्जेक्ट को "अंदर" setLastName() और setLastName() computeAge() तरीकों "बंद" करेंगे। इस तरह से हम वैश्विक नामस्थान "अनलोड" करते हैं, हम इसे नहीं करेंगे:

 function createPerson(first, last, born) { var computeAgeMethod = function(p, currentYear) { return currentYear - p.yearOfBirth; } var setLastNameMethod = function(p, newLastName) { p.lastName = newLastName; } var person = { firstName: first, lastName: last, yearOfBirth: born, computeAge: computeAgeMethod, setLastName: setLastNameMethod }; return person; } // Create a new person and get their age: var p = createPerson("Anne", "Hathaway", 1982); // Note the p.computeAge(p) syntax, instead of just computeAge(p). console.log(p.computeAge(p, 2013)); console.log(p["computeAge"](p, 2013));

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

यह बहुत बेमानी है। हम निम्नलिखित चाल का उपयोग करेंगे: जैसे कि C ++, Java और अन्य भाषाओं में, जावास्क्रिप्ट में एक विशेष चर है। यदि फ़ंक्शन को स्वयं ( f() ) पर बुलाया जाता है, तो यह चर वैश्विक ऑब्जेक्ट (ब्राउज़र में यह window होगा) को इंगित करता है। लेकिन यदि फ़ंक्शन को किसी भी ऑब्जेक्ट, ( pf() ) की विधि के रूप में एक बिंदु के माध्यम से बुलाया जाता है, तो इस बहुत ही ऑब्जेक्ट p को एक पॉइंटर को इस रूप में पास किया जाता है। चूंकि हम अभी भी ऑब्जेक्ट ( p.computeAge ) के संबंधित क्षेत्रों तक पहुंचने के माध्यम से कॉल करने के लिए मजबूर होंगे, विधियों में this पहले से मौजूद होगा और सही मूल्य p सेट होगा। इस ज्ञान का उपयोग करके कोड को फिर से लिखें। इसे भी node कॉपी करने का प्रयास करें।

 function createPerson(first, last, born) { var computeAgeMethod = function(currentYear) { return currentYear - this.yearOfBirth; } var setLastNameMethod = function(newLastName) { this.lastName = newLastName; } var person = { firstName: first, lastName: last, yearOfBirth: born, computeAge: computeAgeMethod, setLastName: setLastNameMethod }; return person; } // Create a new person and get their age: var p = createPerson("Anne", "Hathaway", 1982); console.log(p.computeAge(2013));

प्रोटोटाइप

परिणामी createPerson फ़ंक्शन में निम्न दोष है: यह बहुत तेज़ी से काम नहीं करता है, और हर बार किसी ऑब्जेक्ट के createPerson बहुत सारी मेमोरी खर्च करता है। प्रत्येक बार createPerson कॉल किया जाता है createPerson जावास्क्रिप्ट दो नए कार्यों का निर्माण करता है, और उन्हें कंप्यूट और मान के रूप में निर्दिष्ट करता है जैसे किLastName फ़ील्ड।

यह सुनिश्चित करने के लिए कि हर बार इन कार्यों को कैसे न बनाया जाए? मैं यह कैसे सुनिश्चित कर सकता हूं कि किसी व्यक्ति द्वारा संदर्भित वस्तु में कोई setLastName और setLastName फ़ील्ड नहीं है, लेकिन person.computeAge() और person.setLastName() तरीके काम करना जारी रखते हैं?

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

 var obj1 = { "a": "aVar" }; var obj2 = { "b": "bVar" }; obj1 obj2 obj2.a obj2.b obj2.__proto__ = obj1; obj1 obj2 obj2.a obj2.b

हम देखते हैं कि यदि हम इंगित करते हैं कि obj2 का प्रोटोटाइप obj1 , तो obj2 " obj1 के गुण" जैसे "फ़ील्ड" a "मान के साथ" aVar "" प्रकट होता है। इसी समय, obj2 प्रिंटिंग ऑब्जेक्ट में विशेषता "ए" की उपस्थिति नहीं दिखाएगी।

इसलिए, आप एक बार विधियों को कर सकते हैं, उन्हें प्रोटोटाइप में डाल सकते हैं, और createPerson कन्वर्ट कर सकते हैं ताकि आप इस प्रोटोटाइप का उपयोग कर सकें:

 function createPerson(first, last, born) { var person = { firstName: first, lastName: last, yearOfBirth: born }; person.__proto__ = personPrototype; return person; } var personPrototype = { "computeAge": function(currentYear) { return currentYear - this.yearOfBirth; }, //     "setLastName": function(newLastName) { this.lastName = newLastName; } } // Create a new person and get their age: var p = createPerson("Anne", "Hathaway", 1982); console.log(p); console.log(p.computeAge(2013));

node में इस कोड का प्रयास करें। ध्यान दें कि कौन सी सरल वस्तु, अपने स्वयं के तरीकों के बिना, console.log(p) माध्यम से दिखाई जाती है। और वह सरल विधि अभी भी इस सरल वस्तु के लिए काम करती है।

किसी वस्तु के प्रोटोटाइप को निर्दिष्ट करने की इस पद्धति में दो कमियां हैं। पहला यह है कि विशेष __proto__ विशेषता बहुत नई है, और ब्राउज़रों द्वारा समर्थित नहीं हो सकती है। दूसरी खामी यह है कि setLastName और setLastName साथ नाम स्थान को personPrototype करने से personPrototype बाद भी setLastName हमने अभी भी इसे personPrototype नाम के साथ personPrototype ।

सौभाग्य से, एक और जावास्क्रिप्ट चाल बचाव के लिए आती है, जो सभी ब्राउज़रों के साथ मानक और संगत है।

यदि आप किसी फ़ंक्शन को सिर्फ नाम f() , बल्कि new f() (C ++ या Java से तुलना करके) कहते हैं, तो दो चीजें होती हैं:

एक नया खाली ऑब्जेक्ट {} बनाया गया है, और फ़ंक्शन के शरीर में यह इंगित करने के लिए शुरू होता है।

अधिक जानकारी। डिफ़ॉल्ट रूप से, f() फ़ंक्शन को कॉल करते समय, this आंतरिक रूप से सुलभ फ़ंक्शन केवल वैश्विक संदर्भ को इंगित करता है; अर्थात्, उसी स्थान पर जहां ब्राउज़र window दिखाता है, या Node.JS में global है।
```
 var f = function() { console.log(this); }; f() //     ,    : console.log(window) 
```
हम जानते हैं कि यदि आप किसी फ़ंक्शन को किसी ऑब्जेक्ट pf() क्षेत्र के रूप में कहते हैं, तो इस फ़ंक्शन का यह ऑब्जेक्ट पहले से ही इंगित करेगा। लेकिन यदि फ़ंक्शन को new f() माध्यम से बुलाया जाता है, तो एक ताज़ा खाली ऑब्जेक्ट {} बनाया जाएगा, और this फ़ंक्शन के अंदर पहले से ही इंगित करेगा। नोड में प्रयास करें:
```
 var f = function() { }; console.log({ "a": "this is an object", "f": f }.f()); console.log(new f()); 
```
इसके अलावा, प्रत्येक फ़ंक्शन में एक विशेष .prototype विशेषता है। ऑब्जेक्ट .prototype विशेषता .prototype करता है कि स्वचालित रूप से .prototype 1 से नए बनाए गए ऑब्जेक्ट का प्रोटोटाइप बन जाएगा।

node में प्रयास करें:
```
 var fooProto = { "foo": "prototype!" }; var f = function() { }; (new f()).foo //  undefined f.prototype = fooProto; (new f()).foo //  "prototype!" 
```

इस ज्ञान के साथ, यह समझने में आसान है कि सुपरनोवा __proto__ विशेषता का उपयोग करके ऊपर लिखा गया createPerson कोड इस पारंपरिक कोड के बराबर कैसे है:

 function createPerson(first, last, born) { this.firstName = first; this.lastName = last; this.yearOfBirth = born; } createPerson.prototype = { "computeAge": function(currentYear) { return currentYear - this.yearOfBirth; }, //     "setLastName": function(newLastName) { this.lastName = newLastName; } } // Create a new person and get their age: var p = new createPerson("Anne", "Hathaway", 1982); console.log(p); console.log(p.computeAge(2013));

निम्नलिखित पहलुओं पर ध्यान दें:

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

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

 createPerson.prototype.computeAge = function(currentYear) { return currentYear - this.yearOfBirth; } createPerson.prototype.setLastName = function(newLastName) { this.lastName = newLastName; }

एक jQuery लाइब्रेरी स्लाइस को जोड़ना

ध्यान दें कि createPerson फ़ंक्शन का शरीर सरल और सीधा है

 function createPerson(first, last, born) { var person = { firstName: first, lastName: last, yearOfBirth: born }; return person; }

this में हेरफेर this का एक बहुत ही भयानक क्रम में बदल गया:

 function createPerson(first, last, born) { this.firstName = first; this.lastName = last; this.yearOfBirth = born; }

तर्क विशेषताओं ( first , last ) में ऑब्जेक्ट विशेषताओं ( firstName , last ) की यह मैनुअल आरंभीकरण बहुत कम संख्या वाले तर्कों के साथ उपयुक्त है। लेकिन बड़े और शाखात्मक विन्यास के लिए, विशेषताओं का मैनुअल गणना असुविधाजनक और अनावश्यक रूप से क्रिया बन जाता है।

हम jQuery.extend फ़ंक्शन का उपयोग करते हुए कई फ़ील्ड्स के साथ किसी ऑब्जेक्ट के आरंभीकरण को सरल बना सकते हैं, जो केवल एक ऑब्जेक्ट से दूसरे ऑब्जेक्ट की विशेषताओं को कॉपी करता है:

 function createPerson(first, last, born) { var person = { firstName: first, lastName: last, yearOfBirth: born }); $.extend(this, person); }

इसके अलावा, हम फ़ंक्शन के तर्कों के लिए फ़ील्ड का एक गुच्छा पास नहीं कर सकते, लेकिन फ़ंक्शन के इनपुट के लिए आवश्यक फ़ील्ड के साथ एक ऑब्जेक्ट पास करें:

 function createPerson(person) { $.extend(this, person); } var p = new createPerson({ firstName: "Anne", lastName: "Hathaway", yearOfBirth: 1982 }); console.log(p);

(दुर्भाग्य से, jQuery का उपयोग करने की आवश्यकता के कारण, यह कोड ब्राउज़र में पहले से ही प्रयास करना सबसे आसान है, और node साथ टर्मिनल में नहीं है।)

यह कोड पहले से ही सरल और कॉम्पैक्ट दिखता है। लेकिन हम “नया बनाने वाला” क्यों बना रहे हैं? इस विधि को और अधिक उपयुक्त नाम में बदलने का समय है:

 function Person(person) { $.extend(this, person); } Person.prototype.computeAge = function(currentYear) { return currentYear - this.yearOfBirth; } Person.prototype.setLastName = function(newLastName) { this.lastName = newLastName; } var anne = new Person({ firstName: "Anne", lastName: "Wojcicki", yearOfBirth: 1973 }); var sergey = new Person({ firstName: "Sergey", lastName: "Brin", yearOfBirth: 1973 }); console.log(anne); console.log(sergey);

यहाँ यह सफारी या क्रोम कंसोल में कैसा दिखता है:

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

लिंक

http://sporto.github.com/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/

C / C ++ / C # / Java प्रोग्रामर के लिए जावास्क्रिप्ट प्रोटोटाइप