जावास्क्रिप्ट कंस्ट्रक्टर में प्रॉपर्टी, मेथड कैसे जोड़ें?

परिचय

जावास्क्रिप्ट कंस्ट्रक्टर में प्रॉपर्टीज और मेथड्स जोड़ने के लिए prototype प्रॉपर्टी का उपयोग किया जाता है। prototype पर परिभाषित सभी इंस्टेंसेस द्वारा साझा किए जाते हैं, जिससे मेमोरी बचती है। इंस्टेंस-लेवल प्रॉपर्टीज कंस्ट्रक्टर के अंदर this पर परिभाषित की जाती हैं।

उदाहरण

निम्न कोड जावास्क्रिप्ट कंस्ट्रक्टर में प्रॉपर्टी, मेथड जोड़ने के लिए है:

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>कंस्ट्रक्टर प्रोटोटाइप</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>जावास्क्रिप्ट कंस्ट्रक्टर में प्रॉपर्टी, मेथड जोड़ें</h1> <div style="color: green;" class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> कंस्ट्रक्टर में प्रॉपर्टी, मेथड जोड़ने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const resEle = document.querySelector(".result"); function Human(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } const obj = new Human('रोहन', 'शर्मा'); document.querySelector(".Btn").addEventListener("click", () => { // प्रोटोटाइप पर मेथड जोड़ें Human.prototype.welcome = function() { return 'नमस्ते ' + this.firstName + ' ' + this.lastName; }; // प्रोटोटाइप पर प्रॉपर्टी जोड़ें Human.prototype.age = 22; resEle.innerHTML = 'कंस्ट्रक्टर में प्रॉपर्टी जोड़ना: age <br>' + obj.age + '<br>'; resEle.innerHTML += 'कंस्ट्रक्टर में फ़ंक्शन जोड़ना: welcome() <br>' + obj.welcome() + '<br>'; }); </script> </body> </html>

आउटपुट

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

'यहाँ क्लिक करें' बटन पर क्लिक करने पर:

प्रोटोटाइप चेन

obj.__proto__ === Human.prototype // true
Human.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

सर्वोत्तम अभ्यास

• मेथड्स को prototype पर रखें (सभी इंस्टेंसेस द्वारा साझा)
• इंस्टेंस-स्पेसिफिक डेटा को कंस्ट्रक्टर में this पर रखें
• ES6 क्लासेस इसे स्वचालित रूप से हैंडल करती हैं:

  class Human {
    constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
    welcome() { return `नमस्ते ${this.firstName} ${this.lastName}`; }
  }
  // welcome स्वचालित रूप से Human.prototype पर जाता है