JavaScript प्रोटोटाइप पर आधारित है। हर बार जब आप कोई ऑब्जेक्ट घोषित करते हैं, तो एक प्रोटोटाइप प्रॉपर्टी बनाई जाती है जो उस ऑब्जेक्ट से जुड़ी प्रॉपर्टीज़ और मेथड्स को एक्सटेंड करती है।
पिछले कुछ वर्षों में, कई JavaScript डेवलपर्स ने अपने कोड में ऑब्जेक्ट-ओरिएंटेड डिज़ाइन को शामिल करने के तरीके खोजे हैं। इसने JavaScript में एक नए प्रकार के ऑब्जेक्ट को जन्म दिया है जिसे क्लास कहा जाता है, जो प्रोटोटाइप को एक्सटेंड करता है।
इस गाइड में, हम चर्चा करने जा रहे हैं कि क्लासेस क्या हैं, उनका उपयोग क्यों किया जाता है, और आप अपने कोड में क्लास कैसे लागू कर सकते हैं। हम आपको क्लासेस के साथ शुरू करने में मदद करने के लिए एक उदाहरण के माध्यम से चलेंगे।
JavaScript Class क्या है?
क्लासेस ऑब्जेक्ट के लिए टेम्पलेट घोषित करने का एक तरीका है।
यदि आप ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग भाषाओं से परिचित हैं, तो आप जानते होंगे कि वे क्लासेस और ऑब्जेक्ट्स पर बहुत अधिक निर्भर करती हैं। एक क्लास डेटा के प्रकार के लिए ब्लूप्रिंट की तरह है: यह कहता है कि कौन सा डेटा संग्रहीत किया जा सकता है और कौन से मेथड्स इसे एक्सेस कर सकते हैं। एक ऑब्जेक्ट उस क्लास का एक उदाहरण है।
क्लास का एक उदाहरण Book होगा। इस क्लास में पुस्तकों पर संग्रहीत की जा सकने वाली जानकारी के लिए ब्लूप्रिंट और उस डेटा को कैसे बदला जा सकता है, होगा। एक ऑब्जेक्ट A Streetcar Named Desire हो सकता है, जो एक व्यक्तिगत पुस्तक है।
JavaScript में, क्लासेस को हम सिंटैक्टिक शुगर कहते हैं। क्लास सिंटैक्स रखना अच्छा है, लेकिन वे जरूरी नहीं कि कोई नई कार्यक्षमता जोड़ते हों।
क्लासेस आधुनिक JavaScript फ्रेमवर्क जैसे React और Next.js में आमतौर पर उपयोग किए जाते हैं।
क्लासेस बनाम फंक्शन्स
यदि आप इस लेख से एक बात याद रखते हैं, तो वह यह है: क्लासेस सिर्फ सामान्य फंक्शन्स हैं।
क्लास और फंक्शन एक्सप्रेशन के बीच एकमात्र अंतर यह है कि उन्हें कैसे घोषित किया जाता है; फंक्शन्स function कीवर्ड का उपयोग करते हैं और क्लासेस class कीवर्ड का उपयोग करते हैं। तकनीकी रूप से, आप क्लास कीवर्ड का उपयोग किए बिना भी क्लास घोषित कर सकते हैं।
हम बता सकते हैं कि वे दो फंक्शन्स बनाकर और उनके प्रोटोटाइप प्रिंट करके समान हैं:
const PlayerFunction = function() {}
const PlayerClass = class {}
console.log(Object.getPrototypeOf(PlayerFunction));
console.log(Object.getPrototypeOf(PlayerClass));
हमारा क्लास एक्सप्रेशन और फंक्शन लौटाता है:
function () function ()
हमारे फंक्शन्स और क्लासेस दोनों समान प्रोटोटाइप-आधारित आर्किटेक्चर का उपयोग करते हैं।
क्लास कैसे परिभाषित करें
क्लास कैसे परिभाषित करें? यह एक बढ़िया सवाल है।
आप class कीवर्ड का उपयोग करके क्लास परिभाषित कर सकते हैं। एक बार जब आप क्लास परिभाषित कर लेते हैं, तो आप इसे कुछ डिफ़ॉल्ट मानों के साथ इनिशियलाइज़ करने के लिए constructor() फंक्शन का उपयोग कर सकते हैं।
JavaScript कंसोल खोलें और इस कोड को पेस्ट करें:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
}
यह Book नामक एक क्लास बनाता है। हमारी क्लास दो मान संग्रहीत कर सकती है, title और author, जिन्हें हमने अपने क्लास कंस्ट्रक्टर मेथड में परिभाषित किया है। इस क्लास का ऑब्जेक्ट बनाने के लिए, हम इस कोड का उपयोग कर सकते हैं:
var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
हम अपनी क्लास से मानों को किसी ऑब्जेक्ट की तरह पुनर्प्राप्त कर सकते हैं:
console.log(streetcar.title);
हमारा कोड लौटाता है: A Streetcar Named Desire.
क्लास मेथड कैसे परिभाषित करें
प्रोटोटाइप्स पर क्लासेस का उपयोग करने के लाभों में से एक यह है कि आप क्लास के अंदर मेथड घोषित कर सकते हैं। इसका मतलब है कि आपको मौजूदा फंक्शन में नया मेथड जोड़ने के लिए prototype सिंटैक्स का उपयोग करने की आवश्यकता नहीं है।
इस उदाहरण पर विचार करें:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
getDetails() {
console.log(`${this.title} ${this.author} द्वारा लिखी गई एक पुस्तक है।`);
}
}
हमने getDetails() नामक एक मेथड घोषित किया है जो हमारी क्लास के अंदर मौजूद है। यह अच्छा है क्योंकि यह हमारे सभी कोड को एक साथ समूहित रखता है। आइए हमारे getDetails() फंक्शन को कॉल करें:
var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
streetcar.getDetails();
हमारा कोड लौटाता है:
A Streetcar Named Desire Tennessee Williams द्वारा लिखी गई एक पुस्तक है।
क्लासेस इनहेरिट करना
किसी भी ऑब्जेक्ट-ओरिएंटेड संरचना की तरह, क्लासेस दूसरी क्लासेस से प्रॉपर्टीज़ इनहेरिट कर सकती हैं।
इनहेरिटेंस उस प्रक्रिया को संदर्भित करता है जहां चाइल्ड क्लास पैरेंट क्लास से मेथड्स और डेटा एक्सेस कर सकती है। क्लास इनहेरिट करने के लिए, आप extends कीवर्ड का उपयोग कर सकते हैं। JavaScript फ़ाइल बनाएं या अपना JavaScript कंसोल खोलें और इस कोड को पेस्ट करें:
class Fiction extends Book {
constructor(title, author, fiction) {
super(title, author);
this.fiction = true;
}
}
हमने Fiction नामक एक क्लास बनाई है जिसे हमने पहले घोषित Book क्लास को ब्लूप्रिंट के रूप में उपयोग किया है। हमारे कोड में, हमने पैरेंट क्लास से title और author मानों को इनहेरिट करने के लिए super() कीवर्ड का उपयोग किया है, जो Book है। फिर, हमने एक नया एट्रिब्यूट, fiction, परिभाषित किया है, जिसका मान डिफ़ॉल्ट रूप से true पर सेट है।
आइए हमारी नई Fiction क्लास का ऑब्जेक्ट बनाएं:
var gatsby = new Fiction("The Great Gatsby", "F. Scott Fitzgerald");
console.log(gatsby.fiction);
हमारा कोड लौटाता है: true। Fiction क्लास fiction नामक एक आइटम संग्रहीत करता है जो डिफ़ॉल्ट रूप से true है। यदि हमने Book क्लास के उदाहरण से इस मान को एक्सेस करने का प्रयास किया, तो कुछ भी नहीं लौटाया जाएगा। ऐसा इसलिए है क्योंकि "fiction" केवल हमारी Fiction क्लास में एक्सेसिबल है।
गेटर्स और सेटर्स
जब आप क्लासेस के साथ काम कर रहे होते हैं, तो आपको गेटर और सेटर फंक्शन्स का उपयोग करना चाहिए।
गेटर फंक्शन्स आपको क्लास से मेथड्स पुनर्प्राप्त करने की अनुमति देते हैं। सेटर फंक्शन्स आपको क्लास में किसी विशेष आइटम का मान बदलने की अनुमति देते हैं। इन फंक्शन्स को क्रमशः get और set कीवर्ड्स का उपयोग करके दर्शाया जाता है।
निम्नलिखित कोड पर विचार करें:
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
get author() {
return this.author;
}
set author(author) {
this.author = author;
}
}
इस उदाहरण में, हमने author नामक दो मेथड्स घोषित किए हैं। इन मेथड्स में से एक हमें author का मान पुनर्प्राप्त करने की अनुमति देता है; वह हमारा get मेथड है। दूसरा मेथड हमें author का मान बदलने की अनुमति देता है।
हम इसे निम्न कोड का उपयोग करके क्रिया में देख सकते हैं:
var streetcar = new Book("A Streetcar Named Desire", "");
streetcar.author = "Tennessee Williams";
console.log(streetcar.author);
हमारा कोड लौटाता है: Tennessee Williams।
हमने streetcar नामक एक ऑब्जेक्ट इनिशियलाइज़ किया और इसे शीर्षक A Streetcar Named Desire दिया। फिर हमने अपने कोड में परिभाषित सेटर का उपयोग करके author का मान Tennessee Williams पर सेट किया। अंत में, हमने गेटर मेथड का उपयोग करके author के मान को कंसोल पर प्रिंट किया।
निष्कर्ष
जबकि क्लासेस JavaScript में कोई नई कार्यक्षमता नहीं जोड़ते, वे फंक्शन्स लिखना आसान बनाते हैं यदि आप ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के आदी हैं।
क्लासेस JavaScript के प्रोटोटाइप-आधारित डिज़ाइन को अमूर्त करती हैं और इसे अधिक ऑब्जेक्ट-ओरिएंटेड प्रतीत कराती हैं। "प्रतीत" शब्द महत्वपूर्ण है क्योंकि, याद रखें, क्लासेस फंक्शन्स हैं। क्लासेस सिंटैक्टिक शुगर से ज्यादा कुछ नहीं हैं।
अब आप JavaScript विशेषज्ञ की तरह क्लासेस का उपयोग करना शुरू करने के लिए तैयार हैं!
