Getter y Setter de navegador cruzado

Question

Esto funciona en Chrome/Firefox/Opera moderno pero falla en IE8. No lo he probado en IE9. ¿Cómo puedo compatibilizar este navegador cruzado, incluido IE7 +? (Fiddle here.)

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

// foo.test should be 'Works' 

he visto un cierto uso con __defineGetter__ pero que arrojó un error 'método no reconocido' en IE8.

Answer 1

No creo que puedas.

En IE8 y menor, el acceso a la propiedad es un mero acceso a la propiedad. No hay forma de ejecutar código de función sin invocar explícitamente la función.

Creo que en IE8 es posible que pueda con elementos DOM, pero no creo que funcione para objetos nativos normales.

Answer 2

No se puede, la sintaxis no es compatible con los navegadores que no la implementaron. Pasará bastante tiempo antes de que puedas usar esa sintaxis sin tener problemas de CBC. Sé agradecido. IE6 está prácticamente muerto en América del Norte.

Answer 3

Hay un método "definePropery" que básicamente le permitirá crear métodos de acceso (getters/setters) en Objects sin la necesidad de invocar una llamada a función como setProp()/getProp().

La sintaxis es un poco rara pero he podido hacer que funcione en Firefox, Chrome, Safari e IE9.

Digamos que tengo el objeto JavaScript llamado "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' 

Más información en el sitio de Mozilla here.

Answer 4

Aquí está el workaround para IE6/7/8. ¡Realicé la prueba y funciona muy bien!

Actualización: El vínculo se rompe, se puede ver el código de prueba de mi aquí:

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

    } 
}