Cross-browser Getter and Setter

Question

This works in modern Chrome/Firefox/Opera but fails in IE8. Haven't tried it in IE9. How can I make this cross-browser compatible, including IE7+? (Fiddle here.)

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

// foo.test should be 'Works'

I've seen some usage with __defineGetter__ but that threw an 'unrecognized method' error in IE8.

Mason Zhang · Answer 1 · 2012-08-28T03:49:39.337

Here is the workaround for IE6/7/8. I performed the test and it works very well!

Update: The link is broken, you can see the code of from my testing here:

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

    }
}

Thanks @Tiddo, I cannot find an available page now, and pasted the code from my testing page. — Mason Zhang, Aug 28 '12 at 03:50
`// ...IE8 (must be a DOM object),` , `// IE6-7 ... must be a real DOM object` — the system, Feb 16 '13 at 18:02
This doesn't add a property for non-DOM objects... it doesn't answer the question. — billy, Nov 26 '13 at 16:07
link is back: An easier read: http://johndyer.name/native-browser-get-set-properties-in-javascript/ — Dai Bok, May 09 '14 at 08:34
**Very important:** If you are using `Object.defineProperty` on a property in the global (`window`) object but that property was not defined using the `window` object, then `Object.defineProperty` will always throw a `TypeError: Cannot redefine property` on said property. See http://jsfiddle.net/marketacumen/03qpj13u/ for failure case, and http://jsfiddle.net/marketacumen/w2qjkc8s/ for success case (and workaround, if possible) — razzed, Oct 06 '16 at 18:17

score 4 · Accepted Answer · answered Feb 02 '12 at 03:55

I don't believe you can.

In IE8 and lower, property access is mere property access. There's no way to run function code without explicitly invoking the function.

I think in IE8 you may be able to with DOM elements, but I don't believe it works for regular native objects.

braitsch · Answer 3 · 2012-04-19T23:43:30.923

There is a "definePropery" method that will essentially allow you to create accessor methods (getters/setters) on Objects without the need to invoke a function call like setProp() / getProp().

The syntax is a little weird but I've been able to get this to work on Firefox, Chrome, Safari and IE9.

Say I have JavaScript Object called "Person".

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'

More info on Mozilla's site here.

score 1 · Answer 4 · answered Feb 02 '12 at 04:01

1

You cannot, the syntax is not supported in browsers that did not implement it. Its going to be quite a while before you'll be able to use that syntax without having CBC problems. Be grateful IE6 is pretty much dead in North America.

answered Feb 02 '12 at 04:01

Matt Lo

5,442
1
21
21

4

Makes me ask why Microsoft *hates* JavaScript developers. (hate, a term used to describe the unwillingness to not release / retire broken implementations). – Sukima Mar 07 '14 at 01:17
That's why they created Silverlight: out of pure sadistic hatred of the javascript they created. – May 07 '17 at 18:39

Cross-browser Getter and Setter

4 Answers4

Linked