javascript - whatwg - w3c or

Cross-browser Getter y Setter

Question

Esto funciona en Chrome / Firefox / Opera moderno pero falla en IE8. No lo he probado en IE9. ¿Cómo puedo hacer que este navegador sea compatible, incluido IE7 +? (Violín aquí.)

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

// foo.test should be ''Works''

He visto algo de uso con __defineGetter__ pero eso __defineGetter__ un error de ''método no reconocido'' en IE8.

Answer 1

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

Actualización: el enlace está roto, puede ver el código de mis pruebas 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);

    }
}

Answer 2

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

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

Digamos que tengo un 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 3

No creo que puedas.

En IE8 e inferior, 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 puede ser posible con elementos DOM, pero no creo que funcione para objetos nativos normales.

Answer 4

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