जावास्क्रिप्ट में OOP को समझना [भाग 1]

- प्रोटोटाइप वंशानुक्रम महान है
जावास्क्रिप्ट स्व- भाषा में निहित एक वस्तु-उन्मुख (ओओ) भाषा है, भले ही यह दिखने में जावा जैसा दिखता है। यह तथ्य कुछ अच्छी विशेषताओं के लिए भाषा को वास्तव में शक्तिशाली बनाता है।

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

सौभाग्य से, ECMAScript 5 में बहुत सी चीजें दिखाई दीं, जिसने भाषा को सही रास्ते पर रखने की अनुमति दी (जिनमें से कुछ का इस लेख में खुलासा किया गया है)। यह जावास्क्रिप्ट डिजाइन की खामियों के बारे में भी बात करेगा और क्लासिक प्रोटोटाइप ओओ मॉडल (इसकी ताकत और कमजोरी सहित) के साथ एक छोटी तुलना करेगा।

लेख मानता है कि आप पहले से ही जावास्क्रिप्ट की मूल बातें से परिचित हैं, कार्यों की समझ है (बंद और प्रथम श्रेणी के कार्यों की अवधारणा सहित), आदिम मूल्यों, ऑपरेटरों, आदि।

1. वस्तु

जावास्क्रिप्ट में एक वस्तु केवल कुंजी-मूल्य जोड़े (और कभी-कभी आंतरिक जादू की एक बिट) का एक संग्रह है।

हालाँकि, जावास्क्रिप्ट में कोई वर्ग अवधारणा नहीं है। उदाहरण के लिए, गुणों वाली एक वस्तु {नाम: लिंडा, आयु: 21} किसी भी वर्ग या वर्ग वस्तु का उदाहरण नहीं है। ऑब्जेक्ट और लिंडा दोनों स्वयं के उदाहरण हैं। वे सीधे अपने व्यवहार से निर्धारित होते हैं। कोई मेटा-डेटा परत (यानी कक्षाएं) नहीं है जो इन वस्तुओं को बताएगी कि उन्हें कैसे व्यवहार करना है।

आप पूछ सकते हैं, "यह कैसे है?", खासकर यदि आप क्लासिक ऑब्जेक्ट-ओरिएंटेड भाषाओं (जैसे जावा या सी #) की दुनिया से आते हैं। "लेकिन अगर प्रत्येक वस्तु का अपना व्यवहार होता है (एक सामान्य वर्ग से विरासत में लेने के बजाय), तो अगर मेरे पास 100 वस्तुएं हैं, तो 100 अलग-अलग तरीके उनके अनुरूप हैं? क्या यह खतरनाक नहीं है? और मुझे कैसे पता चलेगा कि, उदाहरण के लिए, एक वस्तु वास्तव में एक ऐरे है ? "

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

प्रोटोटाइप OO मॉडल पुरानी समस्याओं को हल करने के लिए कई नए गतिशील और अभिव्यंजक तरीके लाता है। यह कोड के विस्तार और पुन: उपयोग के लिए शक्तिशाली मॉडल भी प्रस्तुत करता है (और यह उन लोगों के लिए रुचि रखता है जो ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के बारे में बात करते हैं)। हालांकि, यह मॉडल कम गारंटी देता है। उदाहरण के लिए, आप गुण के समान सेट के लिए हमेशा ऑब्जेक्ट x पर भरोसा नहीं कर सकते।

1.1। और वस्तुएं क्या हैं?

यह पहले उल्लेख किया गया था कि वस्तुएं समान मूल्यों के साथ अद्वितीय कुंजियों के जोड़े हैं - ऐसे जोड़े को गुण कहा जाता है। उदाहरण के लिए, आप अपने पुराने दोस्त के कई पहलुओं का वर्णन करना चाहते हैं (आइए उसे मिशा, उर्फ मिखाइल कहते हैं ), जैसे कि उम्र, नाम और लिंग:

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

एक खाली वस्तु एक माता-पिता के बिना, गुणों के बिना एक वस्तु है। आइए जावास्क्रिप्ट में ऐसी वस्तु बनाने के लिए सिंटैक्स देखें:

var mikhail = Object.create(null) 

1.2। संपत्ति निर्माण

तो, इसका मतलब है कि हमारे पास पहले से ही एक वस्तु है, लेकिन इसमें अभी तक गुण नहीं हैं - हमें अपनी मिखाइल वस्तु का वर्णन करने के लिए इस स्थिति को ठीक करना होगा।

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

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

 Object.defineProperty(mikhail, 'name', { value: 'Mikhail' , writable: true , configurable: true , enumerable: true }) Object.defineProperty(mikhail, 'age', { value: 19 , writable: true , configurable: true , enumerable: true }) Object.defineProperty(mikhail, 'gender', { value: 'Male' , writable: true , configurable: true , enumerable: true }) 

Object.defineProperty फ़ंक्शन एक नई संपत्ति बनाता है यदि दी गई कुंजी के साथ संपत्ति पहले मौजूद नहीं थी (अन्यथा, मौजूदा संपत्ति के शब्दार्थ और मूल्य अपडेट किए जाएंगे)।

वैसे, आप Object.defineProperties का भी उपयोग कर सकते हैं जब आपको किसी ऑब्जेक्ट में एक से अधिक संपत्ति जोड़ने की आवश्यकता होती है:

 Object.defineProperties(mikhail, { name: { value: 'Mikhail' , writable: true , configurable: true , enumerable: true } , age: { value: 19 , writable: true , configurable: true , enumerable: true } , gender: { value: 'Male' , writable: true , configurable: true , enumerable: true }}) 

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

1.3। वर्णनकर्ता

छोटी वस्तुओं में जो शब्दार्थ होते हैं, उन्हें डिस्क्रिप्टर कहा जाता है (हमने ऑब्जेक्ट का उपयोग करते समय उन्हें इस्तेमाल किया। ObjectfdeineProperty )। डिस्क्रिप्टर्स दो प्रकारों में से एक है - डेटा डिस्क्रिप्टर और एक्सेस डिस्क्रिप्टर।

दोनों प्रकार के विवरणों में झंडे होते हैं जो यह निर्धारित करते हैं कि भाषा द्वारा संपत्ति को कैसे माना जाएगा। यदि ध्वज सेट नहीं किया गया है, तो इसका डिफ़ॉल्ट मान गलत है (दुर्भाग्य से यह हमेशा एक अच्छा डिफ़ॉल्ट मान नहीं है, जो विवरणकर्ताओं के विवरण मात्रा में वृद्धि की ओर जाता है)।

कुछ झंडों पर विचार करें:

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

एक्सेस डिस्क्रिप्टर गेटर्स और फ़ंक्शंस के निवासियों के माध्यम से एक विशिष्ट मूल्य तक पहुंच को परिभाषित करते हैं। यदि सेट नहीं किया गया है, तो डिफ़ॉल्ट अपरिभाषित है ।

• get () - फ़ंक्शन को तर्कों के बिना कहा जाता है जब संपत्ति के मूल्य के लिए अनुरोध किया जाता है।
• सेट (new_value) - फ़ंक्शन को एक तर्क के साथ कहा जाता है - उपयोगकर्ता द्वारा कोशिश करने पर संपत्ति के लिए नया मूल्य

किसी संपत्ति का मूल्य संशोधित करें।

1.4। सहमति के लिए प्रयास कर रहा है

सौभाग्य से, संपत्ति के विवरणकर्ता जावास्क्रिप्ट में गुणों के साथ काम करने का एकमात्र तरीका नहीं हैं - आप उन्हें अधिक संक्षिप्त रूप से बना सकते हैं।

जावास्क्रिप्ट को भी कोष्ठक के रूप में जाना जाता है का उपयोग करके संपत्ति के संदर्भों को समझता है। मूल नियम निम्नानुसार लिखे गए हैं:

 <bracket-access> ::= <identifier> "[" <expression> "]" 

यहां पहचानकर्ता एक चर है जो एक ऐसी संपत्ति को संग्रहीत करता है जिसमें एक संपत्ति है जिसका मूल्य हम सेट करना चाहते हैं, और अभिव्यक्ति किसी भी मान्य जावास्क्रिप्ट अभिव्यक्ति है जो संपत्ति के नाम को परिभाषित करती है। संपत्ति किस नाम पर हो सकती है, इस पर कोई प्रतिबंध नहीं है;

इस प्रकार, हम पिछले उदाहरण को फिर से लिख सकते हैं:

 mikhail['name'] = 'Mikhail' mikhail['age'] = 19 mikhail['gender'] = 'Male' 

नोट: सभी संपत्ति के नाम अंततः एक स्ट्रिंग में बदल जाते हैं, अर्थात प्रविष्टियाँ ऑब्जेक्ट [1] , ऑब्जेक्ट [[1]] , ऑब्जेक्ट ['1'] और ऑब्जेक्ट [वेरिएबल] (जहाँ वेरिएबल का मान 1 है) बराबर हैं।

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

स्पॉट रिकॉर्डिंग के लिए सामान्य नियम:

 <dot-access> ::= <identifier> "." <identifier-name> 

इस प्रकार, पिछला उदाहरण और भी सुंदर हो गया:

 mikhail.name = 'Mikhail' mikhail.age = 19 mikhail.gender = 'Male' 

दोनों वाक्यविन्यास विकल्प गुणों को बनाने की समान प्रक्रिया करते हैं, जिसमें अर्थ के झंडे सही हैं ।

1.5। संपत्ति का उपयोग

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

 mikhail['age'] // => 19 

लेकिन अगर हम ऐसी संपत्ति का मूल्य पाने की कोशिश करते हैं जो हमारी वस्तु में मौजूद नहीं है, तो हम अपरिभाषित हो जाते हैं :

 mikhail['address'] // => undefined 

1.6। गुण हटाना

किसी ऑब्जेक्ट से किसी प्रॉपर्टी को हटाने के लिए, JavaSCript एक डिलीट ऑपरेटर प्रदान करता है। उदाहरण के लिए, यदि आप हमारी मिखाइल वस्तु से लिंग संपत्ति निकालना चाहते हैं:

 delete mikhail['gender'] // => true mikhail['gender'] // => undefined 

यदि संपत्ति को हटा दिया गया है, और अन्यथा गलत है , तो डिलीट ऑपरेटर सही वापस आ जाएगा। हम यह नहीं बताएंगे कि यह ऑपरेटर कैसे काम करता है। लेकिन अगर आप अभी भी रुचि रखते हैं, तो आप सबसे उत्कृष्ट लेख पढ़ सकते हैं कि कैसे काम करता है हटाएं ।

1.6। गेटएटर और सेटर

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

लेकिन, किसी भी दृष्टिकोण से, वे पढ़ने और लिखने के गुणों के अनुरोध के लिए एक प्रॉक्सी प्रदान करते हैं। उदाहरण के लिए, हमारे पास पहले और अंतिम नाम के लिए अलग-अलग स्लॉट थे, लेकिन हम उन्हें पढ़ने और स्थापित करने का एक सुविधाजनक तरीका चाहते हैं।

शुरू करने के लिए, उपयुक्त गुणों का वर्णन करते हुए, हमारे मित्र का नाम और उपनाम बनाएँ:

 Object.defineProperty(mikhail, 'first_name', { value: 'Mikhail' , writable: true }) Object.defineProperty(mikhail, 'last_name', { value: 'Weiß' , writable: true }) 

फिर हम एक ही समय में दो गुणों को प्राप्त करने और सेट करने के सामान्य तरीके का वर्णन करते हैं - चलो उनके संघ नाम को कॉल करें:

 // () → String // Returns the full name of object. function get_full_name() { return this.first_name + ' ' + this.last_name } // (new_name:String) → undefined // Sets the name components of the object, from a full name. function set_full_name(new_name) { var names names = new_name.trim().split(/\s+/) this.first_name = names[⁣'0'] || '' this.last_name = names['1'] || '' } Object.defineProperty(mikhail, 'name', { get: get_full_name , set: set_full_name , configurable: true , enumerable: true }) 

अब, हर बार जब हम अपने दोस्त की नाम संपत्ति का मूल्य जानने की कोशिश करते हैं, तो get_full_name फ़ंक्शन वास्तव में कहा जाता है :

 mikhail.name // => 'Mikhail Weiß' mikhail.first_name // => 'Mikhail' mikhail.last_name // => 'Weiß' mikhail.last_name = 'White' mikhail.name // => 'Mikhail White' 

हम संबंधित प्रॉपर्टी को एक्सेस करके ऑब्जेक्ट का नाम भी सेट कर सकते हैं, लेकिन वास्तव में set_full_name कॉल करने से सभी गंदे काम होंगे:

 mikhail.name = 'Michael White' mikhail.name // => 'Michael White' mikhail.first_name // => 'Michael' mikhail.last_name // => 'White' 

ऐसे परिदृश्य हैं जिनमें ऐसा करना वास्तव में सुविधाजनक है, लेकिन यह याद रखने योग्य है कि ऐसा तंत्र बहुत धीमी गति से काम करता है।
इसके अलावा, यह ध्यान में रखा जाना चाहिए कि गेटर्स और सेटर आमतौर पर इनकैप्सुलेशन के लिए अन्य भाषाओं में उपयोग किए जाते हैं, और ECMAScript 5 में आप अभी भी ऐसा नहीं कर सकते हैं - सभी ऑब्जेक्ट गुण सार्वजनिक हैं।

1.8। संपत्ति लिस्टिंग

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

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

 Object.getOwnPropertyNames(mikhail) // => [ 'name', 'age', 'gender', 'first_name', 'last_name' ] 

दूसरा तरीका Object.keys का उपयोग करना है , जो अपने स्वयं के गुणों की एक सूची लौटाएगा जो कि असंख्य ध्वज के साथ चिह्नित हैं:

 Object.keys(mikhail) // => [ 'name', 'age', 'gender' ] 

1.9। शाब्दिक

ऑब्जेक्ट बनाने का एक आसान तरीका शाब्दिक जावास्क्रिप्ट सिंटैक्स का उपयोग करना है। एक शाब्दिक वस्तु एक नई वस्तु को परिभाषित करती है जिसका अभिभावक Object.prototype है (हम थोड़ी देर बाद माता-पिता के बारे में बात करेंगे)।

किसी भी मामले में, शाब्दिक वस्तुओं का वाक्यविन्यास आपको सरल वस्तुओं को परिभाषित करने और उनके गुणों को शुरू करने की अनुमति देता है। हम मिखाइल वस्तु बनाने के उदाहरण को फिर से लिखते हैं:

 var mikhail = { first_name: 'Mikhail' , last_name: 'Weiß' , age: 19 , gender: 'Male' // () → String // Returns the full name of object. , get name() { return this.first_name + ' ' + this.last_name } // (new_name:String) → undefined // Sets the name components of the object, // from a full name. , set name(new_name) { var names names = new_name.trim().split(/\s+/) this.first_name = names['0'] || '' this.last_name = names['1'] || '' } } 

अवैध संपत्ति के नाम उद्धरण चिह्नों में संलग्न किए जा सकते हैं। ध्यान दें कि एक शाब्दिक रूप में गेट्टर / सेटर के लिए प्रवेश अनाम कार्यों द्वारा निर्धारित किया जाता है। यदि आप एक पूर्व घोषित फ़ंक्शन को गेटटर / सेटर के साथ जोड़ना चाहते हैं, तो आपको Object.defineProperty विधि का उपयोग करना होगा।

आइए शाब्दिक वाक्य रचना के सामान्य नियमों को देखें:

 <object-literal> ::= "{" <property-list> "}" ; <property-list> ::= <property> ["," <property>]* ; <property> ::= <data-property> | <getter-property> | <setter-property> ; <data-property> ::= <property-name> ":" <expression> ; <getter-property> ::= "get" <identifier> : <function-parameters> : <function-block> ; <setter-property> ::= "set" <identifier> : <function-parameters> : <function-block> ; <property-name> ::= <identifier> | <quoted-identifier> ; 

शाब्दिक वस्तुएँ जावास्क्रिप्ट में अभिव्यक्ति के अंदर दिखाई दे सकती हैं। कुछ अस्पष्टता के कारण, शुरुआती कभी-कभी भ्रमित होते हैं:

 // This is a block statement, with a label: { foo: 'bar' } // => 'bar' // This is a syntax error (labels can't be quoted): { "foo": 'bar' } // => SyntaxError: Invalid label // This is an object literal (note the parenthesis to force // parsing the contents as an expression): ({ "foo": 'bar' }) // => { foo: 'bar' } // Where the parser is already expecting expressions, // object literals don't need to be forced. Eg: var x = { foo: 'bar' } fn({foo: 'bar'}) return { foo: 'bar' } 1, { foo: 

2. तरीके

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

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

 // (person:String) → String // Greets a random person mikhail.greet = function(person) { return this.name + ': Why, hello there, ' + person + '.' } 

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

 mikhail.greet('you') // => 'Michael White: Why, hello there, you.' mikhail.greet('Kristin') // => 'Michael White: Why, hello there, Kristin.' 

2.1। इसे गतिशील करें

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

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

कार्य सामान्य हैं । यानी जावास्क्रिप्ट में, यह चर एक गतिशील लिंक को परिभाषित करता है जो फ़ंक्शन निष्पादित होने पर हल होता है।

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

2.2। यह अनुमति

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

निम्नलिखित उदाहरणों के लिए, आप लेंगे:

 // Returns the sum of the object's value with the given Number function add(other, yet_another) { return this.value + other + (yet_another || 0) } var one = { value: 1, add: add } var two = { value: 2, add: add } 

2.2.1 एक विधि के रूप में कॉल करें

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

यह तब होगा जब हम mikhail.greet () को कॉल करेंगे । यह प्रविष्टि जावास्क्रिप्ट को बताती है कि हम मिखाइल ऑब्जेक्ट पर अभिवादन क्रिया को लागू करना चाहते हैं।

 one.add(two.value) // this === one // => 3 two.add(3) // this === two // => 5 one['add'](two.value) // brackets are cool too // => 3 

2.2.2 डायरेक्ट कॉल

जब किसी फ़ंक्शन को सीधे कहा जाता है, तो इसे इंजन के वैश्विक ऑब्जेक्ट (ब्राउज़र में विंडो , ग्लोबल में Node.js) में हल किया जाता है

 add(two.value) // this === global // => NaN // The global object still has no `value' property, let's fix that. value = 2 add(two.value) // this === global // => 4 

2.2.3। स्पष्ट आवेदन

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

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

किसी भी मामले में, कॉल फ़ंक्शन के पहले पैरामीटर के रूप में ऑब्जेक्ट की अपेक्षा करता है, मूल फ़ंक्शन के सामान्य तर्क के बाद:

 add.call(two, 2, 2) // this === two // => 6 add.call(window, 4) // this === global // => 6 add.call(one, one.value) // this === one // => 2 

दूसरी ओर, लागू करने से आप मूल फ़ंक्शन के मापदंडों का वर्णन दूसरे पैरामीटर के रूप में कर सकते हैं:

 add.apply(two, [2, 2]) // equivalent to two.add(2, 2) // => 6 add.apply(window, [ 4 ]) // equivalent to add(4) // => 6 add.apply(one, [one.value]) // equivalent to one.add(one.value) // => 2 

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

 window.value = 2 add.call(undefined, 1) // this === window // => 3 void function() { "use strict" add.call(undefined, 1) // this === undefined // => NaN // Since primitives can't hold properties. }() 

2.3। विधि बंधन

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

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

 var one_add = add.bind(one) one_add(2) // this === one // => 3 two.one_adder = one_add two.one_adder(2) // this === one // => 3 one_add.call(two) // this === one // => 3 

3. वंशानुक्रम

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

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

प्रोटोटाइप मॉडल आगे बढ़ता है। यद्यपि यह "चयनात्मक तन्मयता" और "व्यवहार साझाकरण" जैसी तकनीकों का समर्थन करता है, लेकिन हम विशेष रूप से उनका अध्ययन नहीं करेंगे। दुखद बात: जावास्क्रिप्ट में लागू विशिष्ट प्रोटोटाइप OO मॉडल कुछ हद तक सीमित हैं। हम इन प्रतिबंधों के आसपास हो सकते हैं, लेकिन ओवरहेड महान होगा।

3.1। प्रोटोटाइप

जावास्क्रिप्ट में वंशानुक्रम किसी वस्तु के व्यवहार को क्लोन करके और विशिष्ट व्यवहार के साथ विस्तार करके पूरा किया जाता है। जिस वस्तु का व्यवहार क्लोन किया जा रहा है, उसे प्रोटोटाइप कहा जाता है।

एक प्रोटोटाइप एक सामान्य वस्तु है जो अन्य वस्तुओं के साथ अपने व्यवहार को साझा करता है - इस मामले में, यह माता-पिता के रूप में कार्य करता है।

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

जैसा कि पहले उल्लेख किया गया है, किसी ऑब्जेक्ट के पैरेंट (या [[प्रोटोटाइप]] ) को एब्जेक्ट क्रिएट द्वारा पहले ऑब्जेक्ट को संदर्भित करने वाले ऑब्जेक्ट के साथ कॉल करके परिभाषित किया जाता है।

आइए मिशा के साथ वापस उदाहरण के लिए चलते हैं। हम उनके नाम और लोगों को एक अलग वस्तु में अभिवादन करने की क्षमता को बताते हैं जो मिशा के साथ उनके व्यवहार को साझा करेगा। यहाँ हमारा मॉडल कैसा दिखेगा:

हम इसे जावास्क्रिप्ट में लागू करते हैं:

 var person = Object.create(null) // Here we are reusing the previous getter/setter functions Object.defineProperty(person, 'name', { get: get_full_name , set: set_full_name , configurable: true , enumerable: true }) // And adding the `greet' function person.greet = function (person) { return this.name + ': Why, hello there, ' + person + '.' } // Then we can share those behaviours with Mikhail // By creating a new object that has it's [[Prototype]] property // pointing to `person'. var mikhail = Object.create(person) mikhail.first_name = 'Mikhail' mikhail.last_name = 'Weiß' mikhail.age = 19 mikhail.gender = 'Male' // And we can test whether things are actually working. // First, `name' should be looked on `person' mikhail.name // => 'Mikhail Weiß' // Setting `name' should trigger the setter mikhail.name = 'Michael White' // Such that `first_name' and `last_name' now reflect the // previously name setting. mikhail.first_name // => 'Michael' mikhail.last_name // => 'White' // `greet' is also inherited from `person'. mikhail.greet('you') // => 'Michael White: Why, hello there, you.' // And just to be sure, we can check which properties actually // belong to `mikhail' Object.keys(mikhail) // => [ 'first_name', 'last_name', 'age', 'gender' ] 

३.२ लेकिन [Prot [प्रोटोटाइप] ? ] कैसे काम करता है?

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

माता-पिता की इस श्रृंखला को प्रत्येक वस्तु में एक छिपे हुए स्लॉट द्वारा परिभाषित किया जाता है जिसे [defined [प्रोटोटाइप] parents] कहा जाता है। आप इसे सीधे नहीं बदल सकते, इसके लिए एक मूल्य निर्धारित करने का केवल एक ही तरीका है - एक नई वस्तु बनाते समय।

जब किसी वस्तु से किसी संपत्ति का अनुरोध किया जाता है, तो इंजन पहले लक्ष्य से संपत्ति प्राप्त करने का प्रयास करता है। यदि संपत्ति नहीं मिली है, तो वस्तु के तत्काल माता-पिता को माना जाता है, फिर माता-पिता के माता-पिता आदि।

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

 // (person:String) → String // Greets the given person person.greet = function(person) { return this.name + ': Harro, ' + person + '.' } mikhail.greet('you') // => 'Michael White: Harro, you.' 

3.3। संपत्ति अधिभार

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

, ? , — .

, Person , Person . , :


, mikhail , kristin greet . greet , greet , Person :

 // Here we set up the greeting for a generic person // (person:String) → String // Greets the given person, formally person.greet = function(person) { return this.name + ': Hello, ' + (person || 'you') } // And a greeting for our protagonist, Mikhail // (person:String) → String // Greets the given person, like a bro mikhail.greet = function(person) { return this.name + ': \'sup, ' + (person || 'dude') } // And define our new protagonist, Kristin var kristin = Object.create(person) kristin.first_name = 'Kristin' kristin.last_name = 'Weiß' kristin.age = 19 kristin.gender = 'Female' // Alongside with her specific greeting manners // (person:String) → String // Greets the given person, sweetly kristin.greet = function(person) { return this.name + ': \'ello, ' + (person || 'sweetie') } // Finally, we test if everything works according to the expected mikhail.greet(kristin.first_name) // => 'Michael White: \'sup, Kristin' mikhail.greet() // => 'Michael White: \'sup, dude' kristin.greet(mikhail.first_name) // => 'Kristin Weiß: \'ello, Michael' // And just so we check how cool this [[Prototype]] thing is, // let's get Kristin back to the generic behaviour delete kristin.greet // => true kristin.greet(mikhail.first_name) // => 'Kristin Weiß: Hello, Michael' 

...