जावास्क्रिप्ट में गेटर्स और सेटर

जावास्क्रिप्ट दिलचस्प सुविधाओं के टन के साथ एक बहुत ही सुंदर भाषा है। इनमें से अधिकांश विशेषताएं एक अप्रिय कारक द्वारा छिपी हुई हैं - इंटरनेट एक्सप्लोरर और अन्य बकवास जिन्हें हमें काम करना है। फिर भी, सामान्य इंजन के साथ अप-टू-डेट ब्राउज़र और सर्वर-साइड जावास्क्रिप्ट के साथ मोबाइल फोन के आगमन के साथ, ये सुविधाएँ अभी और होनी चाहिए। लेकिन आदत से बाहर, नोड के लिए प्रोग्रामिंग करते समय भी। हम लिखने की कोशिश करते हैं ताकि यह IE6 + में काम करे।



इस लेख में मैं एक दिलचस्प और गैर-गुप्त तरीके के बारे में बात करूंगा जो सुरुचिपूर्ण गेटर्स और बसने को निर्दिष्ट करता है, और मूटूल के स्रोत कोड में थोड़ा खोदता है। इस जानकारी का एक हिस्सा जॉन रेजिग के एक लेख से लिया गया है, आंशिक रूप से मेरा व्यक्तिगत अनुभव और प्रयोग।

function Foo(bar){ this._bar = bar; } Foo.prototype = { get bar () { return this._bar; }, set bar (bar) { this._bar = bar; } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मानक प्राप्त करने वाले

गेटर्स और सेटर्स क्या हैं, मुझे उम्मीद है कि हर कोई जानता होगा। आमतौर पर और क्रॉस-ब्राउज़र ऐसा दिखता है:

 function Foo(bar) { this._bar = bar; }; Foo.prototype = { setBar : function (bar) { this._bar = bar; }, getBar : function () { return this._bar; } }; var foo = new Foo; foo.setBar(123); alert(foo.getBar());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप आगे जा सकते हैं और अधिक सुंदर विकल्प लिख सकते हैं:

 function Foo(bar) { var _bar = bar; this.bar = function (bar) { if (arguments.length) _bar = bar; else return _bar; } }; var foo = new Foo; foo.bar(123); alert(foo.bar());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मूल निवासी / बसने वाले

लेकिन एक और अधिक सुविधाजनक तरीका है जो सभी सर्वर इंजन और आधुनिक ब्राउज़र में काम करता है, अर्थात् फ़ायरफ़ॉक्स, क्रोम, सफारी 3 +, ओपेरा 9.5 + - संपत्ति के लिए सेटर और गेट्टर सेट करना ताकि यह संपत्ति के रूप में संपत्ति को संदर्भित करता रहे। इस दृष्टिकोण के कई फायदे हैं:

1. एक और अधिक सुंदर रिकॉर्ड। ORM की कल्पना करें:

 for (var i in topics.comments); // vs for (var i in topics.loadComments());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. यदि पहले से ही एक एपी है, जो गुणों पर आधारित है, और इसे बदला नहीं जा सकता है (लेकिन यह बहुत आवश्यक है)।



ऐसे गेटर / सेटर को सेट करने के दो तरीके हैं:

वाया वस्तु:

 function Foo(bar) { this._bar = bar; }; Foo.prototype = { set bar (bar) { this._bar = bar; }, get bar () { return this._bar; } }; var foo = new Foo; foo.bar = 123; alert(foo.bar);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

__DefineGetter__ और __defineSetter__ विधियों के माध्यम से:

 function Foo(bar) { var _bar = bar; this.__defineGetter__("bar", function(){ return _bar; }); this.__defineSetter__("bar", function(val){ _bar = bar; }); }; var foo = new Foo; foo.bar = 123; alert(foo.bar);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ब्राउज़र समर्थन को परिभाषित करना

इससे, आप यह निर्धारित करने के लिए एक आसान तरीका प्राप्त कर सकते हैं कि ब्राउज़र गेटर्स का समर्थन करता है या नहीं:

 return (typeof {}.__defineGetter__ == 'function');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

विरासत के साथ क्या करना है?

आप .__lookupGetter__



और .__lookupSetter__



माध्यम से .__lookupGetter__



या सेटर फ़ंक्शन प्राप्त कर सकते हैं।

 function extend(target, source) { for ( var prop in source ) { var getter = source.__lookupGetter__(prop), setter = source.__lookupSetter__(prop); if ( getter || setter ) { if ( getter ) target.__defineGetter__(prop, getter); if ( setter ) target.__defineSetter__(prop, setter); } else a[i] = b[i]; } return target; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस प्रकार, मूल स्रोत के लक्षित मानों को हमारे लक्ष्य को पारित नहीं किया जाता है, लेकिन गेटटर / सेटर फ़ंक्शन।

क्या याद रखना

जॉन रेसिग की कुछ टिप्पणियाँ:

* प्रत्येक संपत्ति के लिए आप केवल एक गेट्टर और / या सेटर सेट कर सकते हैं। दो गेटर्स या सेटर नहीं हो सकते

* गेट्टर या सेटर को हटाने का एकमात्र तरीका delete object[name];



को कॉल करना है delete object[name];



। यह कमांड गेट्टर और सेटर दोनों को हटा देता है, क्योंकि यदि आप एक चीज़ को हटाना चाहते हैं और दूसरे को छोड़ना चाहते हैं, तो आपको पहले इसे सहेजना होगा, और डिलीट करने के बाद इसे फिर से असाइन करना होगा

* जब आप __defineGetter__ या __defineSetter__ का उपयोग करते हैं तो यह चुपचाप पिछले गेट्टर या सेटर को ओवरराइट कर देता है और यहां तक ​​कि उस नाम के साथ ही संपत्ति को हटा देता है।

* जांचें कि क्या आपका ब्राउज़र एक सरल स्निपेट का उपयोग कर गेटर्स और सेटर का समर्थन करता है:

 javascript:foo={get test(){ return "foo"; }};alert(foo.test);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MooTools

म्यूटल्स डिफ़ॉल्ट रूप से इस सुविधा का समर्थन नहीं करता है। और, हालांकि मैंने पहले ही पैच का सुझाव दिया था , हम आसानी से (स्रोत को थोड़ा बदल सकते हैं) इसे गेटर्स और सेटर्स को समझते हैं।

तो हमारा लक्ष्य क्या है?

 var Foo = new Class({ set test : function () { console.log('test is set'); }, get test : function () { console.log('test is got'); return 'test'; }, }); foo.test = 1234; // test is set alert(foo.test); // test is get
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इसके अलावा, माता-पिता वर्ग के गेटर्स और सेटर को भी इम्प्लीमेंट्स और एक्सटेंड्स के माध्यम से विरासत में मिली कक्षाओं में काम करना चाहिए। हमारे सभी कार्य एक अनाम फ़ंक्शन के अंदर फ़ाइल [नाम: क्लास] में होंगे।

सबसे पहले, फ़ंक्शन के अंदर, बहुत ऊपर, हम एक फ़ंक्शन को परिभाषित करते हैं जो केवल गेटर्स और सेटर को ओवरराइट करता है। और यद्यपि हमने पुराने ब्राउज़र को छोड़ दिया है - यह बीमा करने लायक है।

 var implementGettersSetters = (typeof {}.__lookupGetter__ == 'function') ? function (target, source) { for (var key in source) { var g = source.__lookupGetter__(key), s = source.__lookupSetter__(key); if ( g || s ) { if (g) target.__defineGetter__(key, g); if (s) target.__defineSetter__(key, s); } } return target; } : function (target, source) { return target; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

बेशक, अगर इस तरह के गेटर्स के साथ हमारी स्क्रिप्ट एक पुराने ब्राउज़र में मिलती है, तो यह बस दुर्घटनाग्रस्त हो जाता है, लेकिन यह किसी को गलती से किसी को इस फ़ाइल को लेने और इसे अपनी साइट पर हुक करने से रोकने के लिए है, और फिर सोचा कि गधे के साथ क्या है ।

हम देखते हैं कि यदि __lookupGetter__ का समर्थन नहीं किया जाता है, तो फ़ंक्शन केवल कुछ भी नहीं करेगा।



अब हमें कक्षा निर्माण और वंशानुक्रम (विस्तार) के दौरान काम करने वाले और बसने वाले मिल जाते हैं। ऐसा करने के लिए:

 //  var Class = this.Class = new Type('Class', function(params){ //   newClass.$constructor = Class; newClass.prototype.$constructor = newClass; newClass.prototype.parent = parent; //   ,    (, ,   !)  : implementGettersSetters(newClass.prototype, params);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एक अलग आंदोलन गेटर्स की विरासत को लागू करने और अशुद्धियों (इम्प्लीमेंट्स) से बसने के लिए है। ऐसा करने के लिए, अंतर्निहित म्यूटेटर ढूंढें और केवल एक पंक्ति जोड़ें:

 Class.Mutators = { // ... Implements: function(items){ Array.from(items).each(function(item){ var instance = new item; for (var key in instance) implement.call(this, key, instance[key], true); //  : implementGettersSetters(this.prototype, instance); }, this); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यही है, अब बसने और गेटर्स को लागू किया जाता है और हम आसानी से इनहेरिट और उपयोग कर सकते हैं। इसका आनंद लें)

 var Foo = new Class({ initialize : function (name) { this.name = name; }, set test : function () { console.log(this.name + ' test is set'); }, get test : function () { console.log(this.name + ' test is got'); return 'test'; }, }); var Bar = new Class({ Extends : Foo }); var Qux = new Class({ Implements : [ Foo ] }); var foo = new Foo('foo'); foo.test = 1234; // foo test is set alert(foo.test); // foo test is got var bar = new Bar('bar'); bar.test = 1234; // bar test is set alert(bar.test); // bar test is got var qux = new Qux('qux'); qux.test = 1234; // qux test is set alert(qux.test); // qux test is got
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

दिलचस्प लिंक:

Object.defineProperty



- बहुत व्यापक सेटिंग्स के साथ गुण बनाने के लिए एक उपकरण, जैसे कि लिखने योग्य, प्राप्त, सेट, कॉन्फ़िगर करने योग्य, गणना करने योग्य

Object.create



- आसानी से जल्दी से आवश्यक वस्तुओं का निर्माण।