जावास्क्रिप्ट ऑब्जेक्ट एक्सेसर
- पिछला पृष्ठ JS ऑब्जेक्ट डिस्प्ले
- अगला पृष्ठ JS ऑब्जेक्ट कन्स्ट्रक्टर
JavaScript एक्सेसर (Getter और Setter)
ECMAScript 5 (2009) में Getter और Setter शामिल किए गए
Getter और Setter आपको ऑब्जैक्ट एक्सेसर (गणनात्मक गुण) परिभाषित करने की अनुमति देते हैं
JavaScript Getter (get शब्द) का उपयोग किया गया है
इस उदाहरण में lang
गुण से लें language
गुण का मान
इंस्टांस
// ऑब्जेक्ट बनाना: var person = { firstName: "Bill", lastName : "Gates", language : "en", get lang() { return this.language; } }; // गेटर का उपयोग करके ऑब्जेक्ट से आए डाटा दिखाना: document.getElementById("demo").innerHTML = person.lang;
JavaScript Setter (set शब्द) का उपयोग किया गया है
इस उदाहरण में lang
गुण से सेट करें language
गुण का मान
इंस्टांस
var person = { firstName: "Bill", lastName : "Gates", language : "", set lang(lang) { this.language = lang; } }; // सेटर का उपयोग करके ऑब्जेक्ट की गुण को सेट करना: person.lang = "en"; // ऑब्जेक्ट से आए डाटा दिखाना: document.getElementById("demo").innerHTML = person.language;
JavaScript फ़ंक्शन या Getter?
दोनों उदाहरणों के बीच क़्या अंतर है?
उदाहरण 1
var person = { firstName: "Bill", lastName : "Gates", fullName : function() { return this.firstName + " " + this.lastName; } }; // ऑब्जैक्ट से आगमन के लिए विधि का उपयोग करें: document.getElementById("demo").innerHTML = person.fullName();
उदाहरण 2
var person = { firstName: "Bill", lastName : "Gates", get fullName() { return this.firstName + " " + this.lastName; } }; // गेटर का उपयोग करके ऑब्जेक्ट से आए डाटा दिखाना: document.getElementById("demo").innerHTML = person.fullName;
उदाहरण 1 में fullName को फ़ंक्शन के रूप में देखें: person.fullName()。
उदाहरण 2 में fullName को गुण के रूप में देखें: person.fullName。
दूसरे उदाहरण में और सरल व्याकरण प्रदान किया गया है。
डाटा गुणवत्ता
getter और setter का उपयोग करते समय, JavaScript बेहतर डाटा गुणवत्ता सुनिश्चित कर सकता है。
इस उदाहरण में lang
गुण बड़े अक्षरों में वापस करता है language
गुण का मान:
इंस्टांस
// ऑब्जेक्ट बनाना: var person = { firstName: "Bill", lastName : "Gates", language : "en", get lang() { return this.language.toUpperCase(); } }; // गेटर का उपयोग करके ऑब्जेक्ट से आए डाटा दिखाना: document.getElementById("demo").innerHTML = person.lang;
इस उदाहरण में lang
गुण बड़े वाले मान को lang में संग्रह करता है language
गुण में:
इंस्टांस
var person = { firstName: "Bill", lastName : "Gates", language : "", set lang(lang) { this.language = lang.toUpperCase(); } }; // सेटर का उपयोग करके ऑब्जेक्ट की गुण को सेट करना: person.lang = "en"; // ऑब्जेक्ट से आए डाटा दिखाना: document.getElementById("demo").innerHTML = person.language;
क्यों गेटर और सेटर का उपयोग करते हैं?
- यह अधिक साधारण व्याकरण प्रदान करता है
- यह गुण और मथडों के लिए एकसी व्याकरण को अनुमति देता है
- यह बेहतर डाटा गुणवत्ता सुनिश्चित करता है
- पिछले काम के लिए फायदेमंद है
एक काउंटर इंस्टांस
इंस्टांस
var obj = { counter : 0, get reset() { this.counter = 0; }, get increment() { this.counter++; }, get decrement() { this.counter--; }, set add(value) { this.counter += value; }, set subtract(value) { this.counter -= value; } }; // काउंटर ऑपरेशन: obj.reset; obj.add = 5; obj.subtract = 1; obj.increment; obj.decrement; Object.defineProperty()
Object.defineProperty()
मथडा गेटर और सेटर जोड़ने के लिए भी उपयोग किया जा सकता है:
इंस्टांस
// ऑब्जेक्ट डिफाइन करना var obj = {counter : 0}; // डिफाइनिंग सेटर्स Object.defineProperty(obj, "reset", { get : function () {this.counter = 0;} }); Object.defineProperty(obj, "increment", { गेट : function () {this.counter++;} }); Object.defineProperty(obj, "decrement", { गेट : function () {this.counter--;} }); Object.defineProperty(obj, "add", { सेट : function (value) {this.counter += value;} }); Object.defineProperty(obj, "subtract", { सेट : function (value) {this.counter -= value;} }); // काउंटर ऑपरेशन: obj.reset; obj.add = 5; obj.subtract = 1; obj.increment; obj.decrement;
ब्राउज़र समर्थन
इंटरनेट एक्सप्लोरर 8 या अधिक पुरानी संस्करण गेटर और सेटर का समर्थन नहीं करते:
हाँ | 9.0 | हाँ | हाँ | हाँ |
- पिछला पृष्ठ JS ऑब्जेक्ट डिस्प्ले
- अगला पृष्ठ JS ऑब्जेक्ट कन्स्ट्रक्टर