लोड हो रहा है...

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

JavaScript में प्रोटोटाइप्स और इनहेरिटेंस (Prototypes and Inheritance) वह नींव हैं जिन पर भाषा की ऑब्जेक्ट-ओरिएंटेड क्षमताएँ खड़ी होती हैं। हर ऑब्जेक्ट किसी न किसी प्रोटोटाइप से जुड़ा होता है, जो उसके लिए साझा गुण (properties) और विधियाँ (methods) उपलब्ध कराता है। जब हम कोड लिखते हैं, तो यह उसी तरह है जैसे हम एक घर बनाते हैं। एक बार दीवारें और ढांचा (प्रोटोटाइप) तैयार हो जाएँ, तो उस पर कई कमरे (ऑब्जेक्ट्स) बनाए जा सकते हैं और अलग-अलग तरीकों से सजाए (methods जोड़कर) जा सकते हैं।
पोर्टफोलियो वेबसाइट में आप "Project" नामक प्रोटोटाइप बना सकते हैं, जिससे सभी प्रोजेक्ट ऑब्जेक्ट्स को साझा विधियाँ मिलें। ब्लॉग में "Post" प्रोटोटाइप हो सकता है जो सभी पोस्ट्स को सामान्य फ़ंक्शन देता है। ई-कॉमर्स साइट में "Product" प्रोटोटाइप होना उपयोगी है ताकि हर प्रोडक्ट पर साझा ऑपरेशन हो सके, जैसे कीमत की गणना। न्यूज़ साइट में "Article" प्रोटोटाइप और सोशल प्लेटफ़ॉर्म में "User" प्रोटोटाइप आम उदाहरण हैं।
इस ट्यूटोरियल में आप सीखेंगे कि प्रोटोटाइप चेन कैसे काम करती है, इनहेरिटेंस क्यों ज़रूरी है और यह कैसे कोड को DRY (Don't Repeat Yourself) बनाता है। जैसे एक लाइब्रेरी में सभी किताबें एक ही शेल्फ़िंग सिस्टम का पालन करती हैं, वैसे ही प्रोटोटाइप्स कोड को संगठित और पुन: प्रयोग करने योग्य बनाते हैं। अंत तक, आप वास्तविक उदाहरणों के साथ समझेंगे कि कैसे अपनी वेबसाइट या ऐप्लिकेशन में प्रोटोटाइप्स और इनहेरिटेंस का उपयोग किया जा सकता है।

मूल उदाहरण

javascript
JAVASCRIPT Code 
// Define a constructor function
function User(name) {
this.name = name;
}
// Add method using prototype
User.prototype.sayHello = function() {
console.log("Hello, I am " + this.name);
};
// Create object and call method
let user1 = new User("Amit");
user1.sayHello(); // Output: Hello, I am Amit

ऊपर दिए गए कोड में सबसे पहले हमने User नाम का एक constructor function बनाया। Constructor functions वह ब्लूप्रिंट होते हैं जिनसे नए ऑब्जेक्ट्स बनाए जाते हैं। यहाँ this.name = name प्रत्येक नए ऑब्जेक्ट को एक व्यक्तिगत "name" प्रॉपर्टी प्रदान करता है।
इसके बाद हमने User.prototype पर sayHello नामक method जोड़ा। यह समझना ज़रूरी है कि JavaScript में हर function का एक prototype object होता है, और जब भी उस function से ऑब्जेक्ट बनाया जाता है, तो नया ऑब्जेक्ट अपने आप इस prototype object से जुड़ जाता है। इसका अर्थ है कि sayHello method सभी User ऑब्जेक्ट्स द्वारा साझा किया जाएगा, बिना हर instance पर अलग से कॉपी किए।
अगली पंक्ति में हमने new User("Amit") का उपयोग करके user1 नामक नया ऑब्जेक्ट बनाया। यह ऑब्जेक्ट अपने अंदर name property रखता है और साथ ही User.prototype से method sayHello इनहेरिट करता है। जब हम user1.sayHello() कॉल करते हैं, तो JavaScript पहले user1 पर sayHello खोजता है। अगर वहाँ नहीं मिलता, तो वह उसके प्रोटोटाइप चेन (User.prototype) में method खोज लेता है।
व्यावहारिक अनुप्रयोगों में, जैसे ब्लॉग या ई-कॉमर्स साइट, यह तरीका हर पोस्ट, आर्टिकल या प्रोडक्ट को साझा methods देने में काम आता है। नए developers को यह सवाल आ सकता है: "क्या हम सीधे object के अंदर method क्यों नहीं लिखते?" इसका कारण यह है कि prototype पर method रखने से memory efficient और maintainable कोड लिखा जा सकता है।

व्यावहारिक उदाहरण

javascript
JAVASCRIPT Code 
// E-commerce Product prototype
function Product(name, price) {
this.name = name;
this.price = price;
}
// Shared method for discount
Product.prototype.getDiscountedPrice = function(discount) {
return this.price - (this.price * discount / 100);
};
// Create product objects
let phone = new Product("Smartphone", 20000);
console.log(phone.getDiscountedPrice(10)); // Output: 18000

Best practices और common mistakes समझना ज़रूरी है ताकि प्रोटोटाइप्स और इनहेरिटेंस का सही और प्रभावी उपयोग हो सके।
सबसे पहले, कुछ Best Practices:

  1. Modern syntax का प्रयोग करें, जैसे class keyword, ताकि कोड readable और maintainable बने।
  2. Methods को हमेशा prototype पर परिभाषित करें, ताकि memory efficient कोड हो।
  3. Error handling का सही उपयोग करें—उदाहरण के लिए, यह जाँचें कि method को दिए गए arguments सही प्रकार के हैं या नहीं।

  4. Performance optimization पर ध्यान दें, खासकर जब हजारों objects बनाए जा रहे हों।
    Common Mistakes जिन्हें टालना चाहिए:

  5. Direct object पर methods जोड़ना, जिससे हर object पर अलग copy बन जाती है और memory leak हो सकता है।

  6. Improper event handling करना, जिससे prototype methods अपेक्षित रूप से काम नहीं करते।
  7. Prototype chain को गलत तरीके से overwrite करना, जिससे methods गायब हो सकते हैं।
  8. Poor error handling करना, जैसे null values पर methods कॉल करना।
    Debugging के लिए Chrome DevTools या Node.js debugger का उपयोग करें। Console.log से प्रोटोटाइप चेन चेक करना एक अच्छा अभ्यास है। Practical recommendation यही है कि पहले छोटे scale पर inheritance बनाकर जाँचें और फिर complex applications जैसे e-commerce या news platform पर implement करें।

📊 त्वरित संदर्भ

Property/Method Description Example
prototype Constructor functions के लिए shared methods और properties रखने की जगह User.prototype.sayHello = function(){}
proto हर object का internal link उसके prototype की ओर obj.proto === User.prototype
constructor Object को बनाने वाला function reference रखता है user1.constructor === User
hasOwnProperty चेक करता है कि property object पर directly है या prototype पर नहीं obj.hasOwnProperty("name")
isPrototypeOf पता लगाता है कि कोई object किसी दूसरे का prototype है या नहीं User.prototype.isPrototypeOf(user1)

Summary और next steps: इस ट्यूटोरियल में आपने सीखा कि JavaScript में प्रोटोटाइप्स और इनहेरिटेंस कैसे काम करते हैं और यह क्यों इतने शक्तिशाली हैं। आपने देखा कि कैसे constructor functions और prototype methods मिलकर memory efficient और reusable code बनाने में मदद करते हैं। मुख्य takeaway यही है कि methods को prototype पर परिभाषित करें, ताकि सभी objects उन्हें साझा कर सकें।
यह अवधारणा सीधे HTML DOM manipulation से जुड़ती है। DOM elements भी prototype chain का उपयोग करते हैं ताकि सभी elements को सामान्य methods जैसे appendChild या querySelector उपलब्ध हों। Backend communication में, आप shared prototypes का उपयोग करके API response objects को handle करने के लिए सामान्य functions परिभाषित कर सकते हैं।
Next steps के लिए आपको JavaScript classes (class और extends) का अध्ययन करना चाहिए, क्योंकि ये prototype-based inheritance का आधुनिक सिंटैक्स हैं। इसके अलावा, आप Object.create(), Object.assign() जैसी advanced methods सीख सकते हैं।
Practical advice: छोटे प्रोजेक्ट्स जैसे ब्लॉग या पोर्टफोलियो में प्रोटोटाइप्स का प्रयोग करके प्रैक्टिस करें और फिर बड़े प्रोजेक्ट्स जैसे social platform या e-commerce पर implement करें। लगातार debugging और experimentation से mastery मिलेगी।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓
4
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 20 का 53
Javascript ट्यूटोरियल