मैंने कुछ ऐसे ही उत्तर देखे हैं, लेकिन मैं यह उल्लेख करना चाहूंगा कि यह पोस्ट इसे सबसे अच्छा बताती है, इसलिए मैं इसे आपके साथ साझा करना चाहूंगा।
यहां से कुछ कोड लिया गया है, जिसे मैंने एक पूर्ण उदाहरण प्राप्त करने के लिए संशोधित किया है, जो उम्मीद है कि समुदाय को लाभ देता है क्योंकि इसे कक्षाओं के लिए डिज़ाइन टेम्पलेट के रूप में उपयोग किया जा सकता है।
यह आपके प्रश्न का उत्तर भी देता है:
function Podcast() {
// private variables
var _somePrivateVariable = 123;
// object properties (read/write)
this.title = 'Astronomy Cast';
this.description = 'A fact-based journey through the galaxy.';
this.link = 'http://www.astronomycast.com';
// for read access to _somePrivateVariable via immutableProp
this.immutableProp = function() {
return _somePrivateVariable;
}
// object function
this.toString = function() {
return 'Title: ' + this.title;
}
};
// static property
Podcast.FILE_EXTENSION = 'mp3';
// static function
Podcast.download = function(podcast) {
console.log('Downloading ' + podcast + ' ...');
};
उस उदाहरण को देखते हुए, आप स्थैतिक गुणों / फ़ंक्शन को निम्नानुसार एक्सेस कर सकते हैं:
// access static properties/functions
console.log(Podcast.FILE_EXTENSION); // 'mp3'
Podcast.download('Astronomy cast'); // 'Downloading Astronomy cast ...'
और वस्तु के गुण / कार्य जैसे:
// access object properties/functions
var podcast = new Podcast();
podcast.title = 'The Simpsons';
console.log(podcast.toString()); // Title: The Simpsons
console.log(podcast.immutableProp()); // 123
ध्यान दें कि पॉडकास्ट.म्यूटेबलपेप () में, हमारे पास एक क्लोजर है : फ़ंक्शन के अंदर _somePStreetVariable का संदर्भ रखा गया है।
आप गेटर्स और सेटर को भी परिभाषित कर सकते हैं । इस कोड स्निपेट पर एक नज़र डालें (जहां dऑब्जेक्ट का प्रोटोटाइप है जिसके लिए आप एक संपत्ति घोषित करना चाहते हैं, yएक निजी चर है जो कंस्ट्रक्टर के बाहर दिखाई नहीं देता है):
// getters and setters
var d = Date.prototype;
Object.defineProperty(d, "year", {
get: function() {return this.getFullYear() },
set: function(y) { this.setFullYear(y) }
});
यह संपत्ति d.yearको कार्यों getऔर setकार्यों के माध्यम से परिभाषित करता है - यदि आप निर्दिष्ट नहीं करते हैं set, तो संपत्ति केवल पढ़ने योग्य है और इसे संशोधित नहीं किया जा सकता है (ध्यान रखें कि यदि आप इसे सेट करने का प्रयास करते हैं तो आपको कोई त्रुटि नहीं मिलेगी, लेकिन इसका कोई प्रभाव नहीं है)। प्रत्येक संपत्ति में विशेषताएँ हैं writable, configurable(घोषणा के बाद बदलने की अनुमति) और enumerable(गणनाकर्ता के रूप में उपयोग करने की अनुमति), जो कि डिफ़ॉल्ट रूप से हैं false। आप उन्हें defineProperty3 पैरामीटर में सेट कर सकते हैं , जैसे enumerable: true।
क्या यह भी मान्य है यह वाक्यविन्यास है:
// getters and setters - alternative syntax
var obj = { a: 7,
get b() {return this.a + 1;},
set c(x) {this.a = x / 2}
};
जो एक पठनीय / लिखने योग्य संपत्ति a, एक पढ़ने योग्य संपत्ति bऔर एक केवल लिखने योग्य संपत्ति को परिभाषित करता है c, जिसके माध्यम से संपत्ति aतक पहुँचा जा सकता है।
उपयोग:
console.log(obj.a); console.log(obj.b); // output: 7, 8
obj.c=40;
console.log(obj.a); console.log(obj.b); // output: 20, 21
टिप्पणियाँ:
यदि आप newकीवर्ड को भूल गए हैं, तो अप्रत्याशित व्यवहार से बचने के लिए , मेरा सुझाव है कि आप फ़ंक्शन में निम्नलिखित जोड़ें Podcast:
// instantiation helper
function Podcast() {
if(false === (this instanceof Podcast)) {
return new Podcast();
}
// [... same as above ...]
};
अब निम्नलिखित दोनों इंस्टेंटेशन उम्मीद के मुताबिक काम करेंगे:
var podcast = new Podcast(); // normal usage, still allowed
var podcast = Podcast(); // you can omit the new keyword because of the helper
'नया' कथन एक नई वस्तु बनाता है और सभी गुणों और विधियों को कॉपी करता है, अर्थात
var a=new Podcast();
var b=new Podcast();
a.title="a"; b.title="An "+b.title;
console.log(a.title); // "a"
console.log(b.title); // "An Astronomy Cast"
यह भी ध्यान दें, कि कुछ स्थितियों returnमें निर्माण कार्य में कथन का उपयोग करने के लिए उपयोगी हो सकता है Podcastएक कस्टम ऑब्जेक्ट को संरक्षित करने वाले कार्यों को वापस करने के लिए जो वर्ग आंतरिक रूप से निर्भर करता है लेकिन जिसे उजागर करने की आवश्यकता होती है। इसे आगे लेख श्रृंखला के अध्याय 2 (ऑब्जेक्ट्स) में समझाया गया है।
आप कह सकते हैं कि aऔर से bविरासत में मिला है Podcast। अब, क्या होगा यदि आप पॉडकास्ट के लिए एक विधि जोड़ना चाहते हैं जो उन सभी पर लागू होता है aऔर बाद bमें निर्जन किया गया है? इस मामले में, .prototypeनिम्नानुसार उपयोग करें :
Podcast.prototype.titleAndLink = function() {
return this.title + " [" + this.link + "]";
};
अब फोन aऔर bफिर से:
console.log(a.titleAndLink()); // "a [http://www.astronomycast.com]"
console.log(b.titleAndLink()); // "An Astronomy Cast [http://www.astronomycast.com]"
आप यहां प्रोटोटाइप के बारे में अधिक जानकारी पा सकते हैं । यदि आप अधिक उत्तराधिकार करना चाहते हैं, तो मेरा सुझाव है कि इस पर गौर करें ।
ऊपर मैंने जिन लेख श्रृंखलाओं का उल्लेख किया है , उन्हें पढ़ने की अत्यधिक अनुशंसा की जाती है, उनमें निम्नलिखित विषय भी शामिल हैं:
- कार्य
- वस्तुओं
- प्रोटोटाइप
- कंस्ट्रक्टर कार्यों पर नया लागू करना
- उत्थापन
- स्वचालित अर्धविराम सम्मिलन
- स्थैतिक गुण और तरीके
ध्यान दें कि स्वचालित अर्धविराम प्रविष्टि "सुविधा" जावास्क्रिप्ट (जैसा कि 6. में उल्लेख किया गया है) अक्सर आपके कोड में अजीब मुद्दे पैदा करने के लिए जिम्मेदार होती है। इसलिए, मैं इसे एक फीचर के रूप में बग के रूप में मानूंगा।
आप अधिक पढ़ने के लिए चाहते हैं, तो यहाँ एक काफी रोचक है MSDN लेख इन विषयों के बारे, उनमें से कुछ वहाँ प्रदान में और अधिक विवरण का वर्णन किया।
जैसा कि पढ़ने के लिए दिलचस्प है (ऊपर वर्णित विषयों को भी कवर करना) एमडीएन जावास्क्रिप्ट गाइड के वे लेख हैं :
यदि आप जानना चाहते हैं कि जावास्क्रिप्ट में c # outपैरामीटर (जैसे DateTime.TryParse(str, out result)) का अनुकरण कैसे करें , तो आप यहां नमूना कोड पा सकते हैं ।
आप में से जो IE के साथ काम कर रहे हैं (जिसमें जावास्क्रिप्ट के लिए कोई कंसोल नहीं है जब तक कि आप डेवलपर टूल का उपयोग करके F12और कंसोल टैब को नहीं खोलते हैं) निम्नलिखित स्निपेट को उपयोगी पा सकते हैं। यह आपको console.log(msg);ऊपर दिए गए उदाहरणों में उपयोग करने की अनुमति देता है। इसे Podcastफंक्शन से पहले डालें ।
आपकी सुविधा के लिए, यहाँ एक पूर्ण एकल कोड स्निपेट में ऊपर दिया गया कोड है:
let console = { log: function(msg) {
let canvas = document.getElementById("log"), br = canvas.innerHTML==="" ? "" : "<br/>";
canvas.innerHTML += (br + (msg || "").toString());
}};
console.log('For details, see the explaining text');
function Podcast() {
// with this, you can instantiate without new (see description in text)
if (false === (this instanceof Podcast)) {
return new Podcast();
}
// private variables
var _somePrivateVariable = 123;
// object properties
this.title = 'Astronomy Cast';
this.description = 'A fact-based journey through the galaxy.';
this.link = 'http://www.astronomycast.com';
this.immutableProp = function() {
return _somePrivateVariable;
}
// object function
this.toString = function() {
return 'Title: ' + this.title;
}
};
// static property
Podcast.FILE_EXTENSION = 'mp3';
// static function
Podcast.download = function(podcast) {
console.log('Downloading ' + podcast + ' ...');
};
// access static properties/functions
Podcast.FILE_EXTENSION; // 'mp3'
Podcast.download('Astronomy cast'); // 'Downloading Astronomy cast ...'
// access object properties/functions
var podcast = new Podcast();
podcast.title = 'The Simpsons';
console.log(podcast.toString()); // Title: The Simpsons
console.log(podcast.immutableProp()); // 123
// getters and setters
var d = Date.prototype;
Object.defineProperty(d, "year", {
get: function() {
return this.getFullYear()
},
set: function(y) {
this.setFullYear(y)
}
});
// getters and setters - alternative syntax
var obj = {
a: 7,
get b() {
return this.a + 1;
},
set c(x) {
this.a = x / 2
}
};
// usage:
console.log(obj.a); console.log(obj.b); // output: 7, 8
obj.c=40;
console.log(obj.a); console.log(obj.b); // output: 20, 21
var a=new Podcast();
var b=new Podcast();
a.title="a"; b.title="An "+b.title;
console.log(a.title); // "a"
console.log(b.title); // "An Astronomy Cast"
Podcast.prototype.titleAndLink = function() {
return this.title + " [" + this.link + "]";
};
console.log(a.titleAndLink()); // "a [http://www.astronomycast.com]"
console.log(b.titleAndLink()); // "An Astronomy Cast [http://www.astronomycast.com]"
<div id="log"></div>
टिप्पणियाँ:
सामान्य रूप से जावास्क्रिप्ट प्रोग्रामिंग के बारे में कुछ अच्छे सुझाव, संकेत और सिफारिशें आप यहां (जावास्क्रिप्ट सर्वोत्तम प्रथाओं) और वहां ('var' बनाम 'लेट') पा सकते हैं । यह भी सिफारिश की है कि इस लेख के बारे में निहित टाइपकास्ट (जबरदस्ती) है ।
कक्षाओं का उपयोग करने और उन्हें जावास्क्रिप्ट में संकलित करने का एक सुविधाजनक तरीका टाइपस्क्रिप्ट है। यहाँ एक खेल का मैदान है जहाँ आप कुछ उदाहरण दिखा सकते हैं कि यह कैसे काम करता है। यहां तक कि अगर आप इस समय टाइपस्क्रिप्ट का उपयोग नहीं कर रहे हैं, तो आप एक नज़र रख सकते हैं क्योंकि आप टाइपस्क्रिप्ट की जावास्क्रिप्ट परिणाम के साथ साइड-बाय-साइड दृश्य पर तुलना कर सकते हैं। अधिकांश उदाहरण सरल हैं, लेकिन एक रेट्रैसर उदाहरण भी है जिसे आप तुरंत आज़मा सकते हैं। मैं विशेष रूप से "क्लास का उपयोग करना", "इनहेरिटेंस का उपयोग करना" और "जेनरिक का उपयोग करना" उदाहरणों को कॉम्बोक्स में चुनकर देखने की सलाह देता हूं - ये अच्छे टेम्पलेट हैं जिन्हें आप तुरंत जावास्क्रिप्ट में उपयोग कर सकते हैं। टाइपस्क्रिप्ट का उपयोग कोणीय के साथ किया जाता है ।
जावास्क्रिप्ट में स्थानीय चर, कार्यों आदि के एनकैप्सुलेशन को प्राप्त करने के लिए , मैं निम्नलिखित पैटर्न का उपयोग करने का सुझाव देता हूं (JQuery एक ही तकनीक का उपयोग करता है):
<html>
<head></head>
<body><script>
'use strict';
// module pattern (self invoked function)
const myModule = (function(context) {
// to allow replacement of the function, use 'var' otherwise keep 'const'
// put variables and function with local module scope here:
var print = function(str) {
if (str !== undefined) context.document.write(str);
context.document.write("<br/><br/>");
return;
}
// ... more variables ...
// main method
var _main = function(title) {
if (title !== undefined) print(title);
print("<b>last modified: </b>" + context.document.lastModified + "<br/>");
// ... more code ...
}
// public methods
return {
Main: _main
// ... more public methods, properties ...
};
})(this);
// use module
myModule.Main("<b>Module demo</b>");
</script></body>
</html>
बेशक, आप कर सकते हैं - और चाहिए - एक अलग *.jsफ़ाइल में स्क्रिप्ट कोड ; यह सिर्फ उदाहरण को छोटा रखने के लिए इनलाइन लिखा है।
सेल्फ-इनवोकिंग फ़ंक्शन (जिसे IIFE = तत्काल इनवॉइस फंक्शन एक्सप्रेशन के रूप में भी जाना जाता है) को यहां और अधिक विस्तार से वर्णित किया गया है ।