Getter e Setter cross-browser

Question

Questo funziona in Chrome/Firefox/Opera moderno ma non riesce in IE8. Non l'ho provato in IE9. Come posso rendere compatibile questo browser, incluso IE7 +? (Fiddle here.)

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

// foo.test should be 'Works' 

Ho visto alcuni utilizzo con __defineGetter__ ma che ha gettato un errore 'metodo riconosciuto' in IE8.

Answer 1

Io non credo che si possa.

In IE8 e inferiore, l'accesso alle proprietà è mero accesso alle proprietà. Non c'è modo di eseguire il codice funzione senza invocare esplicitamente la funzione.

Penso che in IE8 si può essere in grado di con elementi DOM, ma non credo che funziona per gli oggetti nativi regolari.

Answer 2

Non è possibile, la sintassi non è supportata nei browser che non l'hanno implementata. Ci vorrà un po 'di tempo prima che tu possa usare quella sintassi senza avere problemi di CBC. Sii grato IE6 è praticamente morto in Nord America.

Answer 3

Esiste un metodo "definePropery" che essenzialmente consente di creare metodi accessor (getter/setter) su Oggetti senza la necessità di richiamare una chiamata di funzione come setProp()/getProp().

La sintassi è un po 'strano, ma sono stato in grado di ottenere questo al lavoro su Firefox, Chrome, Safari e IE9.

Dire che ho oggetto JavaScript chiamato "Persona".

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' 

Maggiori informazioni sul sito di Mozilla here.

Answer 4

Ecco l'workaround per IE6/7/8. Ho eseguito il test e funziona molto bene!

Aggiornamento: Il collegamento è rotto, si può vedere il codice di dal mio test qui:

// 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); 

    } 
}