ऑब्जेक्ट मेथड
मग का नाम और दाम पहले से साथ हैं। पेज को अब एक छोटा काम चाहिए जो उसी मग का हो: अपना लेबल बनाए, कार्ट की गिनती बढ़ाए, खरीदने वाले को नमस्ते करे। वह फ़ंक्शन ऑब्जेक्ट पर बैठता है। इसी को मेथड कहते हैं।
कुंजियों और सूचियों के बाद
प्रॉपर्टी वाले पाठ में फ़ील्ड जोड़ी गई, एक हटी, in से पूछा गया, नेस्टेड ऑब्जेक्ट में कदम रखा, और Object.keys से नामों की सूची मिली। वहाँ कोई फ़ंक्शन नहीं चला। यहाँ एक प्रॉपर्टी का मान खुद फ़ंक्शन है, और उसे उसी ऑब्जेक्ट से चलाया जाता है।
मेथड के पाँच काम
📊 रखना, कॉल, शॉर्टहैंड, this, आर्ग्युमेंट
| काम | लिखने का ढंग | क्या मिलता है |
|---|---|---|
| रखना | greet: function () { return "Hi"; } |
ऑब्जेक्ट पर बैठा फ़ंक्शन |
| कॉल | product.greet() |
फ़ंक्शन चलता है और परिणाम मिलता है |
| शॉर्टहैंड | label() { return this.name; } |
वही तरह का फ़ंक्शन, छोटा लिखाव |
| this | मेथड के अंदर this.name |
बिंदु से पहले वाला ऑब्जेक्ट |
| आर्ग्युमेंट | cart.add(3) |
सिर्फ़ इस कॉल के लिए अतिरिक्त इनपुट |
पहले काम का नाम तय करें, फिर पंक्ति लिखें। रखना फ़ंक्शन को चलाता नहीं। शॉर्टहैंड कोई नया मान-प्रकार नहीं। this कोई वैश्विक उत्पाद-नाम नहीं जिसे आप होने की आस रखें। आर्ग्युमेंट इस कॉल का इनपुट है, दूसरा ऑब्जेक्ट नहीं।
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);
मान फ़ंक्शन भी हो सकता है
name स्ट्रिंग रखता है। greet फ़ंक्शन रखता है। typeof product.greet का परिणाम "function" है। अभी कुछ चला नहीं, इसलिए Hi नहीं दिखता। मग का नाम फ़ंक्शन के बगल में ही रहता है।
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());
कोष्ठक चलाने का बटन है
product.greet() फ़ंक्शन के अंदर जाता है। कंसोल Hi छापता है। कोष्ठक हटा दें तो आप फ़ंक्शन को देख रहे हैं, उसके लौटाए मान को नहीं। बिंदु बताता है कि यह कॉल किस ऑब्जेक्ट की है।
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());
शॉर्टहैंड सिर्फ़ छोटा लिखाव है
धनुकोष्ठक के अंदर label() { ... } कुंजी label पर फ़ंक्शन रख देता है। यह greet: function () { ... } जैसी ही प्रॉपर्टी है, टाइपिंग कम है। product.label() उसे चलाता है। बॉडी this.name पढ़ती है, कंसोल Mug दिखाता है।
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());
सीधे कॉल में this बिंदु से पहले वाला ऑब्जेक्ट है
product.tag() का मतलब: tag चलाओ और this को product रहने दो। तब this.name और this.price उसी मग के फ़ील्ड हैं। कंसोल Mug — 8 छापता है। मेथड के अंदर नंगा name दूसरी खोज है, वह प्रॉपर्टी नहीं। जब कॉल का आकार object.method() नहीं रहता, this कहीं और जा सकता है — वह अगला पाठ है। यह पेज सीधे कॉल पर रहता है।
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));
मेथड इस कॉल के लिए इनपुट लेता है
add को extra चाहिए। cart.add(3) संख्या 3 देता है, उसे count में जोड़ता है, और नया योग लौटाता है। कंसोल 5 छापता है। कार्ट वही अपडेट हुआ count रखता है। आर्ग्युमेंट कॉल तक रहता है; प्रॉपर्टी तभी बनता है जब आप उसे खुद सहेजें।
जो काम हो, वही चाल चुनें
फ़ंक्शन ऑब्जेक्ट पर रहना चाहिए? लंबा रूप हो या शॉर्टहैंड, रख दें। परिणाम चाहिए? () से कॉल करें। ऑब्जेक्ट के अपने फ़ील्ड चाहिए? this से पढ़ें। सिर्फ़ इस बार एक संख्या चाहिए? आर्ग्युमेंट दें। पिछले पेज पर Object.keys ने नाम गिनाए। अगला पेज this के साथ रहता है, जब कॉल का आकार बदलता है।
मेथड का लेबल पेज पर रखें
उत्पाद को name, price और tag दें। product.tag() को एक अनुच्छेद में लिखें।
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>
अनुच्छेद Mug — 8 दिखाता है। tag ने यह स्ट्रिंग उत्पाद के अपने फ़ील्ड से बनाई। सिर्फ़ name या price बदलें, रिफ्रेश करें, नई पंक्ति पढ़ें। अगला पाठ: this कीवर्ड — जब कॉल सादा object.method() नहीं रहता, this किधर इशारा करता है।
अभ्यास के कदम
greetपर फ़ंक्शन रखें और उस प्रॉपर्टी काtypeofछापें।product.greet()कॉल करें औरHiपढ़ें।- शॉर्टहैंड से
labelलिखें औरproduct.label()छापें। tagऐसा बनाएँ किthis.nameऔरthis.priceएक स्ट्रिंग बनें।countको 2 से शुरू करें,add(3)कॉल करें,5पढ़ें।- HTML डेमो में सिर्फ़
nameयाpriceबदलें, रिफ्रेश करें, अनुच्छेद पढ़ें।
बार-बार होने वाली चूक
()के बिनाproduct.greetछापना औरHiकी उम्मीद रखना- शॉर्टहैंड
label() {}को स्ट्रिंग प्रॉपर्टी समझना - मेथड के अंदर
this.nameकी जगह नंगाnameलिखना - यह सोचना कि
cart.add(3)के बादcount2 पर टिका रहेगा - मेथड कॉल की जगह
Object.keysकी ओर जाना - इस पेज के मेथड में ऐरो फ़ंक्शन रख देना — अगला पाठ
thisको तब देखता है जब कॉल का आकार बदलता है
सार
- मेथड वह फ़ंक्शन है जो प्रॉपर्टी की तरह रखा गया हो
object.method()उसे चलाता है और लौटाया मान देता है- शॉर्टहैंड
name() {}उसी तरह का फ़ंक्शन रखता है - सीधे कॉल में
thisबिंदु से पहले वाला ऑब्जेक्ट है - पैरामीटर उस कॉल का आर्ग्युमेंट लेता है
- मेथड की स्ट्रिंग पेज की एक पंक्ति भर सकती है
- आगे:
thisकीवर्ड, जब कॉलobject.method()न हो
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी