Constructor functions and ES6 class syntax In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में क्लासेज ऑब्जेक्ट प्रॉपर्टीज़ और क्लास मेथड्स के साथ क्लास ऑब्जेक्ट क्रिएट करने के दो पॉपुलर मेथड हैं. जो की क्लास कंस्ट्रक्टर फ़ंक्शन ES6 स्क्रिप्ट से पहले और ES6 क्लास सिंटैक्स में ECMAScript 6 में इसे पहली बार लॉन्च किया गया है।
ऊपर दिए गए दोनों ही तरीके से जावास्क्रिप्ट प्रोग्रामर को क्लास ऑब्जेक्ट क्रिएट करने और क्लास इंस्टैंसिएट एलिमेंट क्रिएशन फीचर्स प्रोवाइड करते हैं, जबकि यहाँ जावास्क्रिप्ट प्रोग्रामर ES6 क्लास सिंटैक्स का उपयोग मॉडर्न और एडवांस्ड मेथड है, इसी में क्लास इनहेरिटेंस फीचर्स और पैरेंट क्लास से सबक्लास मेथड डेफ़िनिशन जैसी फीचर्स भी हैं. जो की जावास्क्रिप्ट लैंग्वेज में ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP) फंडामेंटल कांसेप्ट को अप्लाई करती हैं।
So, let’s analyse both the methods in JavaScript.
Constructor Function Before ES6 JavaScript Class.
जावास्क्रिप्ट में ES6 स्क्रिप्ट से पहले, प्रोग्राम में कंस्ट्रक्टर फ़ंक्शन री-यूजेबल क्लास ऑब्जेक्ट को क्रिएट करने के पॉपुलर मेथड थे। जावास्क्रिप्ट मे क्लास कंस्ट्रक्टर फ़ंक्शन एक जनरल फ़ंक्शन की तरह ट्रीट होता है. इसका उपयोग क्लास ऑब्जेक्ट को क्रिएट करने और उन्हें प्रोग्राम में इनिशियलाइज़ करने में होता है।
Syntax of JavaScript Class.
function employee(emp_name, emp_age) {
this.emp_name = emp_name;
this.emp_age = emp_age;
// let create a Method inside the constructor function
this.display = function() {
console.log(`welcome, employee ${this.emp_name} and employee age ${this.emp_age} year old.`);
};
}
Class object creation example using constructor function.
// let Create a new instance of employee class use with the ‘new’ keyword
let employee1 = new employee(“Harry”, 40);
employee1.display(); // Result – welcome, employee Harry and employee age 40 year old.
Explanation of created class.
ऊपर दिए गए क्लास में एम्प्लॉई कंस्ट्रक्टर फ़ंक्शन ऑब्जेक्ट के लिए एम्प्लॉई नाम और एम्प्लॉई ऐज क्लास प्रॉपर्टीज को इनिशियलाइज़ किया जाता है। जहा display क्लास मेथड कंस्ट्रक्टर फ़ंक्शन के अंदर क्रिएट किया गया है, और इन्हे क्लास इंस्टेंस में एक्सेस किया गया है।
ES6 Class Syntax in JavaScript Programming.
जावास्क्रिप्ट ES6 स्क्रिप्ट में क्लास सिंटैक्स को पहली बार 2015 में लॉन्च किया गया था, जिसमे जावास्क्रिप्ट बिगिनर प्रोग्रामर के लिए क्लास और क्लास ऑब्जेक्ट क्रिएशन का एक बेहतर और एडवांस्ड मेथड बताया गया था। यह प्रोग्रामर को क्लास इनहेरिटेंस, क्लास मेथड डेफ़िनिशन और क्लास ऑब्जेक्ट क्रिएशन प्रोसेस को सिंपल और बेहतर करता है।
Syntax of ES6 Class.
class employee {
constructor(emp_name, emp_age) {
this.emp_name = emp_name;
this.emp_age = emp_age;
}
// let create a class Method defined inside the class
display() {
console.log(`welcome, employee name is ${this.emp_name} and employee age is ${this.emp_age} year old.`);
}
}
Example of object creation using ES6 class syntax.
// let Create a new instance of employee use with the ‘new’ keyword
let employees = new employee(“Bhavishi”, 20);
employees.display(); // Result – welcome, employee name is Bhavishi and employee age is 20 year old.
Explanation of ES6 Class syntax.
यहाँ ES6 स्क्रिप्ट एम्प्लॉई क्लास में एम्प्लॉई नाम और एम्प्लॉई ऐज क्लास प्रॉपर्टीज को इनिशियलाइज़ करने के लिए एक कंस्ट्रक्टर मेथड है। यहाँ display() मेथड क्लास के अंदर डिफाइन की गई है, और मौजूदा क्लास से बनाए गए क्लास इंस्टेंस में अवेलबल होती है।
Main differences between constructor functions and ES6 classes in JavaScript programming.
Declaration syntax of a class.
क्लास प्रोग्राम में कंस्ट्रक्टर फ़ंक्शन, फ़ंक्शन कीवर्ड को क्लास डिक्लेरेशन में अप्लाई करते हैं, और क्लास प्रॉपर्टीज और मेथड्स को डिफाइन करने के लिए this कीवर्ड पर डिपेंड करते हैं।
जावास्क्रिप्ट में न्यू ES6 स्क्रिप्ट में क्लासेस को डिक्लेरेशन में class कीवर्ड का यूज़ करते हैं, जो की वर्त्तमान समय में मॉडर्न और एडवांस्ड क्लासेस और मेथड्स को क्रिएट करने के लिए एक क्लियर और अधिक डिटेल्ड स्ट्रक्चर्ड सिंटैक्स प्रोवाइड करता है।
Class methods and definitions.
क्लास में कंस्ट्रक्टर फ़ंक्शन में क्लास मेथड्स को फ़ंक्शन के अंदर this ऑब्जेक्ट में क्लियरली रूप से डिफाइन और डिपेंड होती है. जो कभी-कभी क्लास के लिए डिसेबल हो सकता है, क्योंकि प्रत्येक क्लास इंस्टेंस का अपना अलग मेथड होता है।
जबकि मॉडर्न ES6 स्क्रिप्ट में क्लासेस मेथड्स को सीधे क्लास बॉडी में डिफाइन किया जाता है, और ऑटोमेटिकली आर्डर में क्लास के प्रोटोटाइप में प्रोसेस किया जाता है, इसका मतलब है कि सभी क्लास इंस्टेंस एक ही मेथड को शेयर करते हैं।
Class prototype and inheritance.
ओल्ड क्लास कंस्ट्रक्टर फ़ंक्शन क्लास इनहेरिटेंस के लिए प्रोटोटाइप चेन पर कम्प्लीटली डिपेंड करते हैं। जहा किसी कंस्ट्रक्टर फ़ंक्शन के सभी क्लास इंस्टेंस में मेथड्स या प्रॉपर्टीज को ऐड करने के लिए, उन्हें क्लास प्रोटोटाइप में क्लियर आर्डर से ऐड होना चाहिए।
जबकि ES6 स्क्रिप्ट क्लासेस में क्लास मेथड्स ऑटोमेटिकली रूप से क्लास प्रोटोटाइप में ऐड कर दी जाती हैं, जिससे क्लास इनहेरिटेंस को क्लियर आर्डर में प्रोसेस और मैनेज करना बेहतर हो जाता है।
The new keyword in a class.
क्लास इंस्टेंस क्रिएट करते समय कंस्ट्रक्टर फ़ंक्शन और ES6 स्क्रिप्ट क्लास दोनों को new कीवर्ड की जरूरत होती है। बिना new कीवर्ड के एक रेगुलर फ़ंक्शन बेहतर परफॉर्म नहीं करेगा, और मौजूदा प्रोग्राम में कोई ऑब्जेक्ट को रिटर्न नहीं करेगा, और डिक्लेअर क्लास कंस्ट्रक्टर प्रोग्राम में एरर जनरेट करेगा।
Example of class constructor function and ES6 class comparison in JavaScript.
Javascript class constructor function before an ES6 script.
function course(course_name, course_price) {
this.course_name = course_name;
this.course_price = course_price;
}
course.prototype.price = function() {
console.log(`${this.course_name} you select.`);
};
let c_detail = new course(“Javascript”, “thousand”);
c_detail.price(); // Result – Javascript you select.
ES6 Script Class Methods in JavaScript.
class course {
constructor(course_name, course_price) {
this.course_name = course_name;
this.course_price = course_price;
}
price() {
console.log(`${this.course_name} you select.`);
}
}
let c_detail = new course(“javascript”, “thousand”);
c_detail.price(); // Result – javascript you select.
Explanation of class constructor function and ES6 class.
ऊपर दिए गए दोनों प्रोग्राम एक्साम्प्ल एक ही क्लास फंक्शन की तरह काम करते हैं, जबकि यहाँ ES6 स्क्रिप्ट क्लास फंक्शन सिंटैक्स क्लियर और अधिक डिक्लेअर स्ट्रक्चर्ड क्लास सिंटेक्स मेथड है। जो की मौजूदा प्रोग्राम में क्लास प्रोटोटाइप इनहेरिटेंस प्रॉपर्टीज को ऑटोमेटिकली आर्डर में मैनेज करता है, जिससे प्रोग्राम सोर्स कोड कम्प्लीटली डिटेल्ड और स्ट्रक्चर्ड हो जाता है।
Inheritance Example with Constructor Function vs ES6 Classes in JavaScript.
Inheritance with Constructor Function in JavaScript Program Before ES6 Script.
function employee(emp_name) {
this.emp_name = emp_name;
}
employee.prototype.info = function() {
console.log(`${this.emp_name} is a female employee.`);
};
function detail(name, id) {
employee.call(this, name); // it used to Call the parent constructor
this.id = id;
}
detail.prototype = Object.create(employee.prototype); // let create some Inherit attributes from employee class
detail.prototype.constructor = detail;
detail.prototype.info1 = function() {
console.log(`${this.emp_name} is a web developer.`);
};
let emp_Info = new detail(“siddhi”, “designer”);
emp_Info.info(); // Result – siddhi is a female employee.
emp_Info.info1(); // Result – siddhi is a web developer.
Inheritance with classes from JavaScript ES6 script.
class Employee {
constructor(emp_name) {
this.emp_name = emp_name;
}
info() {
console.log(`${this.emp_name} is a female employee.`);
}
}
class emp_info extends Employee { // let it used to Inherit from employee class
constructor(name, id) {
super(name); // let it used to Call the parent class constructor
this.id = id;
}
info1() {
console.log(`${this.emp_name} is a web developer.`);
}
}
let disp_info = new emp_info(“Bhavishi”, “designer”);
disp_info.info(); // Result – Bhavishi is a female employee.
disp_info.info1(); // Result – Bhavishi is a web developer.
Explanation of Inheritance with Constructor Function vs ES6 Classes.
- Constructor Function Inheritance – इस प्रोग्राम में डिटेल कंस्ट्रक्टर पैरेंट कंस्ट्रक्टर को कॉल करने के लिए employee.call(this, emp_name) फंक्शन को यूज़ करता है। इसके साथ ही, डिटेल और एम्प्लॉई क्लास के बीच क्लास प्रोटोटाइप सीरीज को ऐड करने के लिए Object.create(employee.prototype) का उपयोग करते है।
- ES6 Script Class Inheritance – यहाँ emp_info क्लास को employee क्लास से इनहेरिट करने के लिए extends कीवर्ड को यूज़ करते है, और super(name) को पैरेंट कंस्ट्रक्टर के रूप में कॉल करता है।
Summary Differences between class constructor function and ES6 class
| Feature of both | Javascript Constructor Functions (before-ES6) | Javascript ES6 Classes method |
| Syntax | Used to declare traditional function Constructor() {…} method | Declare with modern class ClassName {…} syntax |
| Class Method Definitions | You can Defined inside constructor or prototype | You can Defined inside the class body |
| Class Inheritance | You can Use Object.create() and call() method | You can Use extends and super keyword |
| Class Prototypes | Here you need to explicitly manipulate the class prototype | Here it Automatically handled another class prototype |
| Ease of class Use | It is treated as More verbose and less readable | It treats as Cleaner and more concise syntax for class |
| Class Methods on Prototype | It uses Explicitly added to prototype in class | It Automatically added to the class’s prototype attributes |
Class Constructor and ES6 Class Inheritance in JavaScript.
वर्तमान जावास्क्रिप्ट में क्लास कंस्ट्रक्टर फ़ंक्शन आज भी यूजेबल और वैलिड हैं, और ये ग्लोबली एक्सेस और यूज़ किये जाते हैं, स्पेशल्ली, ओल्ड जावास्क्रिप्ट प्रोग्राम सोर्स कोड में। जबकि, क्लास कंस्ट्रक्टर फ़ंक्शन अधिक डिटेल्ड आर्डर में एक्सप्लेन होते हैं, और इन क्लास कंस्ट्रक्टर फ़ंक्शन में क्लास इनहेरिटेंस और क्लास मेथड डेफ़िनिशन के लिए प्रोटोटाइप को मैन्युअल आर्डर में एक्सेस और मैनेज करना होता है।
वही मॉडर्न जावास्क्रिप्ट प्रोग्रामिंग में ES6 स्क्रिप्ट जावास्क्रिप्ट क्लासेस ऑब्जेक्ट क्रिएट करने और क्लास इनहेरिटेंस ऐट्रिब्यूट्स को मैनेज और कण्ट्रोल करने का एक एडवांस्ड क्लियर और अधिक स्ट्रक्चर्ड मेथड प्रोवाइड करते हैं. जो की नए प्रोग्रामर और डेवेलपर को नए मॉडर्न जावास्क्रिप्ट डेवलपमेंट प्रोजेक्ट्स के लिए फर्स्ट चॉइस बनाता है।
