क्रॉस-ब्राउज़र गेटटर और सेटर

Question

यह आधुनिक क्रोम/फ़ायरफ़ॉक्स/ओपेरा में काम करता है लेकिन IE8 में विफल रहता है। आईई 9 में कोशिश नहीं की है। मैं इस क्रॉस-ब्राउज़र को आईई 7 + सहित संगत कैसे बना सकता हूं? (Fiddle here.)

var foo = { 
    get test(){ return 'Works'; } 
}; 

// foo.test should be 'Works' 

मैं __defineGetter__ के साथ कुछ प्रयोग देखा है लेकिन यह है कि IE8 में एक 'गैर मान्यता विधि' त्रुटि फेंक दिया।

Answer 1

मुझे विश्वास नहीं है कि आप कर सकते हैं।

IE8 और निम्न में, संपत्ति का उपयोग केवल संपत्ति का उपयोग है। फ़ंक्शन को स्पष्ट रूप से फ़ोकस किए बिना फ़ंक्शन कोड चलाने का कोई तरीका नहीं है।

मुझे लगता है कि आईई 8 में आप डोम तत्वों के साथ सक्षम हो सकते हैं, लेकिन मुझे विश्वास नहीं है कि यह नियमित देशी वस्तुओं के लिए काम करता है।

Answer 2

आप नहीं कर सकते हैं, वाक्यविन्यास उन ब्राउज़र में समर्थित नहीं है जिन्होंने इसे लागू नहीं किया है। यह कुछ समय पहले होगा जब आप सीबीसी समस्याओं के बिना उस वाक्यविन्यास का उपयोग करने में सक्षम होंगे। आभारी रहें आईई 6 उत्तरी अमेरिका में काफी ज्यादा मर चुका है।

Answer 3

एक "परिभाषाप्रॉपरी" विधि है जो आपको आवश्यक रूप से सेटपॉप()/getProp() जैसे फ़ंक्शन कॉल को आमंत्रित करने की आवश्यकता के बिना ऑब्जेक्ट्स पर एक्सेसर विधियों (गेटर्स/सेटर्स) बनाने की अनुमति देती है।

वाक्यविन्यास थोड़ा अजीब है लेकिन मैं इसे फ़ायरफ़ॉक्स, क्रोम, सफारी और आईई 9 पर काम करने में सक्षम हूं।

कहें कि मेरे पास "व्यक्ति" नामक जावास्क्रिप्ट ऑब्जेक्ट है।

function Person() 
{ 
// set a default value // 
    this.__name = 'John'; 
// add getter & setter methods // 
    Object.defineProperty(this, "name", { 
     get: function() { 
     // additional getter logic 
      return this.__name; 
     }, 
     set: function(val) { 
      this.__name = val; 
     // additional setter logic 
     } 
    }); 
} 

var p = new Person(); 
console.log(p.name); // 'John' 
p.name = 'Stephen'; 
console.log(p.name); // 'Stephen' 

मोज़िला साइट here.

Answer 4

यहाँ पर अधिक जानकारी IE6/7/8 के लिए workaround है। मैंने परीक्षण किया और यह बहुत अच्छी तरह से काम करता है!

अद्यतन: लिंक टूट गया है, तो आप यहाँ मेरे परीक्षण से की कोड देख सकते हैं:

// Super amazing, cross browser property function, based on http://thewikies.com/ 
function addProperty(obj, name, onGet, onSet) { 

    // wrapper functions 
    var 
     oldValue = obj[name], 
     getFn = function() { 
      return onGet.apply(obj, [oldValue]); 
     }, 
     setFn = function (newValue) { 
      return oldValue = onSet.apply(obj, [newValue]); 
     }; 

    // Modern browsers, IE9+, and IE8 (must be a DOM object), 
    if (Object.defineProperty) { 

     Object.defineProperty(obj, name, { 
      get: getFn, 
      set: setFn 
     }); 

    // Older Mozilla 
    } else if (obj.__defineGetter__) { 

     obj.__defineGetter__(name, getFn); 
     obj.__defineSetter__(name, setFn); 

    // IE6-7 
    // must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire) 
    } else { 

     var onPropertyChange = function (e) { 

      if (event.propertyName == name) { 
       // temporarily remove the event so it doesn't fire again and create a loop 
       obj.detachEvent("onpropertychange", onPropertyChange); 

       // get the changed value, run it through the set function 
       var newValue = setFn(obj[name]); 

       // restore the get function 
       obj[name] = getFn; 
       obj[name].toString = getFn; 

       // restore the event 
       obj.attachEvent("onpropertychange", onPropertyChange); 
      } 
     }; 

     obj[name] = getFn; 
     obj[name].toString = getFn; 

     obj.attachEvent("onpropertychange", onPropertyChange); 

    } 
}