जावास्क्रिप्ट प्रोटोटाइप (उदाहरणों के साथ)

इस ट्यूटोरियल में, आप उदाहरणों की मदद से जावास्क्रिप्ट में प्रोटोटाइप के बारे में जानेंगे।

इससे पहले कि आप प्रोटोटाइप सीखें, इन ट्यूटोरियल्स को जांचना सुनिश्चित करें:

• जावास्क्रिप्ट वस्तुओं
• जावास्क्रिप्ट निर्माता समारोह

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

 // constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();

उपरोक्त उदाहरण में, function Person()एक ऑब्जेक्ट कंस्ट्रक्टर फ़ंक्शन है। हमने दो ऑब्जेक्ट बनाए हैं person1और person2उससे।

जावास्क्रिप्ट प्रोटोटाइप

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

 function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )

उपरोक्त उदाहरण में, हम एक Personकंस्ट्रक्टर फ़ंक्शन के प्रोटोटाइप संपत्ति तक पहुंचने का प्रयास कर रहे हैं ।

चूंकि प्रोटोटाइप प्रॉपर्टी का फिलहाल कोई मूल्य नहीं है, इसलिए यह एक खाली ऑब्जेक्ट (…) दिखाता है।

प्रोटोटाइप इनहेरिटेंस

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

 // constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);

आउटपुट

 (लिंग: "पुरुष") पुरुष पुरुष

उपरोक्त कार्यक्रम में, हम एक नया संपत्ति जोड़ लिया है genderकरने के लिए Personका उपयोग कर निर्माता समारोह:

 Person.prototype.gender = 'male';

फिर ऑब्जेक्ट person1और फंक्शन को कंस्ट्रक्टर फ़ंक्शन के प्रोटोटाइप संपत्ति से person2विरासत में मिला ।genderPerson

इसलिए, दोनों वस्तुएं person1और person2लिंग संपत्ति तक पहुंच सकते हैं।

नोट: किसी ऑब्जेक्ट कंस्ट्रक्टर फ़ंक्शन में गुण जोड़ने का सिंटैक्स है:

 objectConstructorName.prototype.key = 'value';

प्रोटोटाइप का उपयोग एक कंस्ट्रक्टर फ़ंक्शन से बनाई गई सभी वस्तुओं को अतिरिक्त संपत्ति प्रदान करने के लिए किया जाता है।

प्रोटोटाइप का उपयोग करके एक कंस्ट्रक्टर फ़ंक्शन के तरीके जोड़ें

आप प्रोटोटाइप का उपयोग करके एक निर्माता फ़ंक्शन में नए तरीके भी जोड़ सकते हैं। उदाहरण के लिए,

 // constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John

उपरोक्त कार्यक्रम में, एक प्रोटोटाइप का उपयोग करके निर्माण कार्य में एक नई विधि greetजोड़ी जाती है Person।

प्रोटोटाइप बदलना

यदि एक प्रोटोटाइप मूल्य को बदल दिया जाता है, तो सभी नई वस्तुओं में परिवर्तित संपत्ति मूल्य होगा। पहले से बनाई गई सभी वस्तुओं का पिछला मूल्य होगा। उदाहरण के लिए,

 // constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20

नोट : आपको मानक जावास्क्रिप्ट निर्मित वस्तुओं के प्रोटोटाइप को संशोधित नहीं करना चाहिए जैसे कि तार, सरणियां, आदि। यह एक बुरा अभ्यास माना जाता है।

जावास्क्रिप्ट प्रोटोटाइप चेनिंग

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

 function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23

उपरोक्त कार्यक्रम में, एक संपत्ति का नाम कंस्ट्रक्टर फ़ंक्शन में और कंस्ट्रक्टर फ़ंक्शन के प्रोटोटाइप संपत्ति में भी घोषित किया जाता है।

जब प्रोग्राम निष्पादित होता है, person1.nameतो कंस्ट्रक्टर फ़ंक्शन में दिखता है कि यह देखने के लिए कि क्या कोई संपत्ति है name। चूंकि कंस्ट्रक्टर फ़ंक्शन में मूल्य के साथ नाम गुण होता है 'John', ऑब्जेक्ट उस संपत्ति से मूल्य लेता है।

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

नोट : आप किसी ऑब्जेक्ट से किसी फ़ंक्शन के प्रोटोटाइप गुण तक भी पहुँच सकते हैं।

 function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )

उपरोक्त उदाहरण में, एक personऑब्जेक्ट का उपयोग करके प्रोटोटाइप संपत्ति तक पहुंचने के लिए किया जाता है __proto__। हालाँकि, __proto__हटा दिया गया है और आपको इसका उपयोग करने से बचना चाहिए।