OOJS: ऑब्जेक्ट ओरिएंटेड Javaउदाहरण सहित स्क्रिप्ट ट्यूटोरियल
जेम्स हार्टमैन
⚡ स्मार्ट सारांश
वस्तु के उन्मुख Javaस्क्रिप्ट वास्तविक दुनिया की संस्थाओं को ऐसे ऑब्जेक्ट के रूप में मॉडल करती है जिनमें गुण और विधियाँ होती हैं। यह पृष्ठ ऑब्जेक्ट लिटरल, कंस्ट्रक्टर फ़ंक्शन, प्रोटोटाइप, ES6 क्लास, इनहेरिटेंस और प्राइवेट फ़ील्ड के बारे में उदाहरणों के साथ बताता है जिन्हें आप चलाकर सत्यापित कर सकते हैं।
OOPS अवधारणा क्या है? Javaलिखी हुई कहानी?
कई बार, चर या सारणी वास्तविक जीवन की स्थितियों का अनुकरण करने के लिए पर्याप्त नहीं होते हैं। Javaस्क्रिप्ट आपको वास्तविक जीवन की वस्तुओं की तरह काम करने वाली वस्तुएं बनाने की अनुमति देती है। एक छात्र या घर ऐसी वस्तुएं हो सकती हैं जिनमें कई अनूठी विशेषताएं हों। प्रोग्रामिंग को आसान बनाने के लिए आप अपनी वस्तुओं पर गुण और विधियां बना सकते हैं। यदि आपकी वस्तु एक छात्र है, तो उसमें प्रथम नाम, अंतिम नाम और आईडी जैसी गुणधर्म और calculateRank या changeAddress जैसी विधियां होंगी। यदि आपकी वस्तु एक घर है, तो उसमें कमरों की संख्या, पेंट का रंग और स्थान जैसी गुणधर्म और calculateArea या changeOwner जैसी विधियां होंगी।
ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग में Javaइसलिए यह स्क्रिप्ट चार विचारों पर आधारित है जो आपको इस पृष्ठ पर मिलेंगे: समूहping स्टेट और बिहेवियर को एक ऑब्जेक्ट में समाहित करना, कंस्ट्रक्टर के माध्यम से ब्लूप्रिंट का पुन: उपयोग करना, प्रोटोटाइप के माध्यम से मेथड्स को साझा करना और आंतरिक डेटा तक सीधी पहुंच को प्रतिबंधित करना। यदि आप इस भाषा में नए हैं, तो इससे शुरुआत करें। परिचय Javaलिपि और फिर यहीं लौट आओ.
ऑब्जेक्ट कैसे बनाएं
आप इस प्रकार एक ऑब्जेक्ट बना सकते हैं:
var objName = new Object(); objName.property1 = value1; objName.property2 = value2; objName.method1 = function() { // line of code }
या, संक्षिप्त ऑब्जेक्ट लिटरल रूप का उपयोग करते हुए:
var objName = { property1: value1, property2: value2, method1: function() { // lines of code } };
ऑब्जेक्ट गुण और विधियों तक पहुँचें
आप डॉट नोटेशन का उपयोग करके किसी ऑब्जेक्ट की प्रॉपर्टी तक पहुंच सकते हैं, और आप कोष्ठक जोड़कर किसी मेथड को कॉल कर सकते हैं:
objectname.propertyname; // read a property objectname.methodname(); // call a method objectname["propertyname"]; // bracket notation, useful for dynamic keys
इस उदाहरण को स्वयं आज़माएँ:
<html>
<head>
<title>Objects!!!</title>
<script type="text/javascript">
var student = new Object();
student.fName = "John";
student.lName = "Smith";
student.id = 5;
student.markE = 76;
student.markM = 99;
student.markS = 87;
student.calculateAverage = function()
{
return (student.markE + student.markM + student.markS)/3;
};
student.displayDetails = function()
{
document.write("Student Id: " + student.id + "<br />");
document.write("Name: " + student.fName + " " + student.lName + "<br />");
var avg = student.calculateAverage();
document.write("Average Marks: " + avg);
};
student.displayDetails();
</script>
</head>
<body>
</body>
</html>
आउटपुट:
Student Id: 5 Name: John Smith Average Marks: 87.33333333333333
💡टिप: ऊपर दिए गए उदाहरण में इसका उपयोग किया गया है। दस्तावेज़.लिखें क्योंकि यह इस पृष्ठ पर संपादक के अंदर चलता है। वास्तविक परियोजनाओं में, प्राथमिकता दें दिलासा देना डिबगिंग या DOM विधियों जैसे कि पाठ्य सामग्री, क्योंकि दस्तावेज़.लिखें लोडिंग पूरी होने के बाद जब इसे कॉल किया जाता है तो यह पेज को मिटा देता है।
ओओपीएस कंस्ट्रक्टर
एक-एक करके ऑब्जेक्ट बनाना उतना उपयोगी नहीं है, क्योंकि आपको हर छात्र के लिए एक ही कोड दोहराना होगा। यहीं पर ऑब्जेक्ट कंस्ट्रक्टर काम आता है। कंस्ट्रक्टर एक सामान्य फ़ंक्शन है जिसे कॉल किया जाता है। नई कीवर्ड; यह एक ऑब्जेक्ट प्रकार को परिभाषित करता है जिसे प्रत्येक व्यक्तिगत इंस्टेंस के लिए पुन: उपयोग किया जा सकता है।
कंस्ट्रक्टर के अंदर, इसका यह नए ऑब्जेक्ट के निर्माण को संदर्भित करता है, इसलिए प्रत्येक इंस्टेंस को पास किए गए मानों की अपनी प्रति प्राप्त होती है। संबंधित मान, जैसे कि चिह्न, अक्सर एक में संग्रहीत किए जाते हैं। सरणी ताकि उन्हें एक ही बार में कुल योग किया जा सके।
इस उदाहरण को स्वयं आज़माएँ:
<html>
<head>
<script type="text/javascript">
function Student(first, last, id, english, maths, science)
{
this.fName = first;
this.lName = last;
this.id = id;
this.markE = english;
this.markM = maths;
this.markS = science;
this.calculateAverage = function()
{
return (this.markE + this.markM + this.markS)/3;
}
this.displayDetails = function()
{
document.write("Student Id: " + this.id + "<br />");
document.write("Name: " + this.fName + " " + this.lName + "<br />");
var avg = this.calculateAverage();
document.write("Average Marks: " + avg + "<br /><br />");
}
}
var st1 = new Student("John", "Smith", 15, 85, 79, 90);
var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
st1.displayDetails();
st2.displayDetails();
st3.displayDetails();
st4.displayDetails();
</script>
</head>
<body>
</body>
</html>
आउटपुट:
Student Id: 15 Name: John Smith Average Marks: 84.66666666666667 Student Id: 23 Name: Hannah Turner Average Marks: 79 Student Id: 4 Name: Kevin White Average Marks: 90.66666666666667 Student Id: 11 Name: Rose Taylor Average Marks: 54.333333333333336
किसी ऑब्जेक्ट के गुणों के माध्यम से लूप करें
सिंटेक्स:
for (variablename in objectname) { // lines of code to be executed }
के लिए/में पाश इसका उपयोग आमतौर पर किसी ऑब्जेक्ट के गुणों को समझने के लिए किया जाता है। आप इसे कोई भी नाम दे सकते हैं। परिवर्तनशीललेकिन ऑब्जेक्ट का नाम पहले से मौजूद ऑब्जेक्ट से मेल खाना चाहिए। प्रत्येक पास पर, वेरिएबल प्रॉपर्टी को धारण करता है। कुंजी इसे एक स्ट्रिंग के रूप में लिखा जाता है, इसलिए मान को ब्रैकेट नोटेशन जैसे कि के साथ पढ़ा जाता है। कर्मचारी[x].
इस उदाहरण को स्वयं आज़माएँ:
<html>
<head>
<script type="text/javascript">
var employee={first:"John", last:"Doe", department:"Accounts"};
var details = "";
document.write("<b>Using for/in loops </b><br />");
for (var x in employee)
{
details = x + ": " + employee[x];
document.write(details + "<br />");
}
</script>
</head>
<body>
</body>
</html>
आउटपुट:
Using for/in loops first: John last: Doe department: Accounts
दो बातें याद रखने योग्य हैं। एक फॉर/इन लूप प्रोटोटाइप श्रृंखला के माध्यम से विरासत में मिली गणना योग्य प्रॉपर्टीज़ को भी एक्सेस करता है, इसलिए एक गार्ड जैसे कि ऑब्जेक्ट.प्रोटोटाइप.हैज़ओनप्रॉपर्टी.कॉल(कर्मचारी, x) इसे अक्सर जोड़ा जाता है। साधारण डेटा ऑब्जेक्ट के लिए, ऑब्जेक्ट.कीज़(कर्मचारी) or ऑब्जेक्ट.एंट्रीज़(कर्मचारी) यह आमतौर पर अधिक स्पष्ट होता है, क्योंकि दोनों ही ऑब्जेक्ट के अपने गुणों को ही लौटाते हैं।
ES6 क्लास का सिंटैक्स क्या है? Javaलिखी हुई कहानी?
ECMAScript 2015, जिसे आमतौर पर ES6 कहा जाता है, ने निम्नलिखित सुविधाएँ जोड़ीं: कक्षा कीवर्ड। एक क्लास प्रोटोटाइप सिस्टम पर सिंटैक्टिक शुगर है जिसका उपयोग ऊपर दिए गए कंस्ट्रक्टर फ़ंक्शन द्वारा पहले से ही किया जाता है: कोई नया ऑब्जेक्ट मॉडल पेश नहीं किया गया है। चल रहा है छात्र का प्रकार किसी क्लास पर अभी भी "फ़ंक्शन" स्ट्रिंग वापस आती है, और क्लास बॉडी में लिखे गए प्रत्येक मेथड को इंस्टॉल किया जाता है। छात्र.प्रोटोटाइपजिसका अर्थ है कि सभी इंस्टेंस उस विधि की एक प्रति साझा करते हैं, बजाय इसके कि प्रत्येक ऑब्जेक्ट अपनी स्वयं की विधि ले जाए।
यह सिंटैक्स कुछ खामियों को भी दूर करता है। क्लास बॉडी हमेशा स्ट्रिक्ट मोड में एग्जीक्यूट होती है, बिना किसी क्लास को कॉल किए। नई यह ग्लोबल ऑब्जेक्ट को चुपचाप दूषित करने के बजाय एक TypeError उत्पन्न करता है, और गेटर्स, सेटर्स और स्टैटिक सदस्यों के लिए एक समर्पित स्थान होता है। इसका परिणाम यह होता है कि कोड छोटा हो जाता है लेकिन वही उद्देश्य व्यक्त करता है।
class Student { constructor(first, last, id, english, maths, science) { this.fName = first; this.lName = last; this.id = id; this.marks = [english, maths, science]; } calculateAverage() { const total = this.marks.reduce((sum, m) => sum + m, 0); return total / this.marks.length; } displayDetails() { console.log("Student Id: " + this.id); console.log("Name: " + this.fName + " " + this.lName); console.log("Average Marks: " + this.calculateAverage().toFixed(2)); } } const st1 = new Student("John", "Smith", 15, 85, 79, 90); st1.displayDetails(); console.log(typeof Student); console.log(st1.calculateAverage === Student.prototype.calculateAverage);
आउटपुट:
Student Id: 15 Name: John Smith Average Marks: 84.67 function true
अंतिम दो पंक्तियाँ इस बात को साबित करती हैं: क्लास अभी भी एक फ़ंक्शन है, और इंस्टेंस पर मौजूद मेथड वही फ़ंक्शन ऑब्जेक्ट है जो प्रोटोटाइप पर संग्रहीत है।
कंस्ट्रक्टर फ़ंक्शन बनाम ES6 क्लास
| पहलू | कंस्ट्रक्टर फ़ंक्शन | ES6 क्लास |
|---|---|---|
| घोषणा | फ़ंक्शन छात्र(…) { } | क्लास स्टूडेंट { कंस्ट्रक्टर(…) { } } |
| विधि प्लेसमेंट | फ़ंक्शन के अंदर असाइन किया गया है, इसलिए प्रत्येक इंस्टेंस को अपनी कॉपी मिलती है जब तक कि आप इसे लिखते नहीं हैं। छात्र.प्रोटोटाइप | क्लास बॉडी में लिखा गया और प्रोटोटाइप पर स्वचालित रूप से रखा गया |
| बिना नए के कॉल करना | चुपचाप चलता है और इसका अपरिभाषित है या वैश्विक वस्तु | तुरंत एक TypeError उत्पन्न करता है |
| उत्थापन | फ़ंक्शन घोषणाओं को होस्ट किया जाता है और परिभाषा से पहले उपयोग किया जा सकता है। | मूल्यांकन होने तक अस्थायी गतिरोध में |
| सख्त मोड | आसपास की स्क्रिप्ट का अनुसरण करता है | हमेशा सख्त |
| विरासत | मैनुअल: ऑब्जेक्ट.क्रिएट प्लस एक कॉल अभिभावक को | फैली और सुपर |
| निजी डेटा | क्लोजर या नामकरण परंपरा जैसे _संतुलन | सच्चे निजी क्षेत्र के साथ # |
| अंतर्निहित मॉडल | प्रोटोटाइप | प्रोटोटाइप (रनटाइम पर समान) |
extends और super का उपयोग करके इनहेरिटेंस को कैसे लागू करें
इनहेरिटेंस एक विशिष्ट प्रकार को अधिक सामान्य प्रकार के गुणों और विधियों का पुन: उपयोग करने की अनुमति देता है। ES6 से पहले, इसका मतलब था प्रोटोटाइप श्रृंखला को तीन अलग-अलग चरणों में मैन्युअल रूप से जोड़ना, और उनमें से एक को भूल जाना आसान था।
function Person(fName, lName) { this.fName = fName; this.lName = lName; } Person.prototype.introduce = function () { return "I am " + this.fName + " " + this.lName; }; function Student(fName, lName, id) { Person.call(this, fName, lName); // 1. borrow the parent constructor this.id = id; } Student.prototype = Object.create(Person.prototype); // 2. link the chain Student.prototype.constructor = Student; // 3. repair constructor var st = new Student("Kevin", "White", 4); console.log(st.introduce()); console.log(st instanceof Person);
आउटपुट:
I am Kevin White true
RSI फैली कीवर्ड आपके लिए तीनों चरणों को पूरा करता है, और सुपर यह माता-पिता तक पहुंचने का एक स्पष्ट तरीका प्रदान करता है। इसके दो अलग-अलग उपयोग हैं। सुपर:
- सुपर(…) एक कॉल के रूप में यह पैरेंट कंस्ट्रक्टर को चलाता है। यह केवल डिराइव्ड कंस्ट्रक्टर के अंदर ही मान्य है, और इसे आपके द्वारा किसी भी बदलाव से पहले चलना चाहिए। इसका अन्यथा ReferenceError उत्पन्न हो जाएगा।
- सुपर.मेथड() क्योंकि प्रॉपर्टी लुकअप किसी मेथड के पैरेंट वर्जन को कॉल करता है जिसे चाइल्ड ने ओवरराइड किया है, इस तरह आप व्यवहार को बदलने के बजाय उसका विस्तार करते हैं।
class Person { constructor(fName, lName) { this.fName = fName; this.lName = lName; } introduce() { return "I am " + this.fName + " " + this.lName; } } class Student extends Person { constructor(fName, lName, id) { super(fName, lName); // must run before "this" is used this.id = id; } introduce() { return super.introduce() + ", roll number " + this.id; } } const st = new Student("Hannah", "Turner", 23); console.log(st.introduce()); console.log(st instanceof Student, st instanceof Person); console.log(Object.getPrototypeOf(Student.prototype) === Person.prototype);
आउटपुट:
I am Hannah Turner, roll number 23 true true true
तीसरी पंक्ति महत्वपूर्ण है। यह पुष्टि करती है कि फैली इसने मैन्युअल रूप से बनाए गए प्रोटोटाइप लिंक को हूबहू तैयार किया, इसलिए क्लास ने प्रोटोटाइप चेनिंग को प्रतिस्थापित नहीं किया। उन्होंने बस अनावश्यक कोड को छिपा दिया। जब किसी प्रॉपर्टी को पढ़ा जाता है stइंजन उस उदाहरण को देखता है, फिर छात्र.प्रोटोटाइप, तो व्यक्ति.प्रोटोटाइप, तो ऑब्जेक्ट.प्रोटोटाइपऔर पहले मिलान पर रुक जाता है; वह खोज पथ प्रोटोटाइप श्रृंखला है।
⚠️ चेतावनी: कभी भी असाइन न करें छात्र.प्रोटोटाइप = व्यक्ति.प्रोटोटाइपइससे दोनों प्रकार एक ही ऑब्जेक्ट साझा करते हैं, इसलिए आप चाइल्ड में जो भी मेथड जोड़ते हैं, वह पेरेंट में भी जुड़ जाता है। ऑब्जेक्ट.क्रिएट(पर्सन.प्रोटोटाइप)या बस उपयोग करें फैली.
प्राइवेट क्लास फ़ील्ड्स के साथ एनकैप्सुलेशन कैसे प्राप्त करें
एनकैप्सुलेशन का मतलब है रखनाping आंतरिक स्थिति आपकी पहुंच से बाहर है ताकि इसे केवल आपके नियंत्रण वाले तरीकों से ही बदला जा सके। वर्षों से। Javaस्क्रिप्ट डेवलपर्स ने इसे एक अग्रणी अंडरस्कोर के साथ नकली बना दिया, लेकिन एक नाम जैसे _संतुलन यह केवल एक परंपरा है और कोई भी कोड इसे ओवरराइट कर सकता है। आधुनिक Javaस्क्रिप्ट वास्तविक गोपनीयता प्रदान करती है: एक फ़ील्ड जिसका नाम इससे शुरू होता है # यह केवल उस क्लास बॉडी के अंदर ही सुलभ है जो इसे घोषित करती है।
निजी खेतों से तीन ठोस लाभ मिलते हैं:
- इनका उपयोग करने से पहले इन्हें क्लास बॉडी में घोषित किया जाना चाहिए, जो टाइप की आंतरिक स्थिति को एक ही स्थान पर दस्तावेजित करता है।
- वे अदृश्य हैं ऑब्जेक्ट.कुंजी, JSON.स्ट्रिंगिफ़ाईऔर for/in, ताकि आंतरिक स्थिति क्रमबद्ध आउटपुट में लीक न हो।
- किसी क्लास के बाहर से किसी प्राइवेट फील्ड को छूना एक सिंटैक्स एरर है, जिसे कोड चलने से पहले ही पकड़ लिया जाता है, न कि यह कोई साइलेंट बग है।
class BankAccount { #balance = 0; constructor(owner, opening) { this.owner = owner; this.#balance = opening; } deposit(amount) { if (amount <= 0) { return "Deposit must be positive"; } this.#balance += amount; return this.owner + " balance: " + this.#balance; } get balance() { return this.#balance; } } const acc = new BankAccount("John", 500); console.log(acc.deposit(250)); console.log(acc.deposit(-40)); console.log("Read via getter: " + acc.balance); console.log("Own keys: " + Object.keys(acc)); console.log("JSON: " + JSON.stringify(acc));
आउटपुट:
John balance: 750
Deposit must be positive
Read via getter: 750
Own keys: owner
JSON: {"owner":"John"}
शेष राशि कभी दिखाई नहीं देती ऑब्जेक्ट.कुंजी या JSON स्ट्रिंग में, और नकारात्मक जमा राशि को फ़ील्ड को दूषित करने के बजाय विधि द्वारा अस्वीकार कर दिया जाता है। बैलेंस प्राप्त करें() एक्सेसर एक रीड-ओनली व्यू को एक्सपोज करता है, जो निजी स्थिति को सुरक्षित रूप से प्रकाशित करने का सामान्य तरीका है।
अब जब ऑब्जेक्ट, प्रोटोटाइप, क्लास, इनहेरिटेंस और एनकैप्सुलेशन समझ में आ गए हैं, तो निर्माण जारी रखें। इन उदाहरणों के साथ बुनियादी बातों का अभ्यास करें। व्यावहारिक Javaस्क्रिप्ट कोड के उदाहरण, काम के माध्यम से इंटरैक्टिव Javaस्क्रिप्ट अभ्यासएल्गोरिदम पर क्लास लागू करें जैसे कि क्विकसॉर्ट में Javaलिपिआउटपुट को व्यवस्थित करें Javaस्क्रिप्ट स्ट्रिंग फ़ॉर्मेटिंगऔर देखें कि स्थिर ty कैसेping ऑब्जेक्ट डिज़ाइन में परिवर्तन TypeScript.
