Watch for object properties changes in JavaScript

javascript object cross-browser properties watch

52,454

Solution 1

I have created a small object.watch shim for this a while ago. It works in IE8, Safari, Chrome, Firefox, Opera, etc.

/*
* object.watch v0.0.1: Cross-browser object.watch
*
* By Elijah Grey, http://eligrey.com
*
* A shim that partially implements object.watch and object.unwatch
* in browsers that have accessor support.
*
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/

// object.watch
if (!Object.prototype.watch)
    Object.prototype.watch = function (prop, handler) {
        var oldval = this[prop], newval = oldval,
        getter = function () {
            return newval;
        },
        setter = function (val) {
            oldval = newval;
            return newval = handler.call(this, prop, oldval, val);
        };
        if (delete this[prop]) { // can't watch constants
            if (Object.defineProperty) // ECMAScript 5
                Object.defineProperty(this, prop, {
                    get: getter,
                    set: setter
                });
            else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) { // legacy
                Object.prototype.__defineGetter__.call(this, prop, getter);
                Object.prototype.__defineSetter__.call(this, prop, setter);
            }
        }
    };

// object.unwatch
if (!Object.prototype.unwatch)
    Object.prototype.unwatch = function (prop) {
        var val = this[prop];
        delete this[prop]; // remove accessors
        this[prop] = val;
    };

Solution 2

Unfortunately, this is not a portable solution. IE has nothing like this to my knowledge, though it would be awesome if there was

52,454

Author by

Philippe

Updated on July 09, 2022

Comments

Philippe almost 2 years

Possible Duplicate:
Javascript Object.Watch for all browsers?

I just read Mozilla's documentation for the watch() method. It looks very useful.

However, I can't find something similar for Safari. Neither Internet Explorer.

How do you manage portability across browsers?
keyle over 12 years

Any reason as to why you removed it from Github? Better solution? Wasn't working? How about IE7?
Eli Grey over 12 years

It's still on Github, I just move it to a gist (gist.github.com/384583) due to it not really being significant enough for a repo imo.
jchook over 11 years

how do we use this to monitor innerHTML on DOM objects?
Greg over 11 years

Does it actually work for IE8 on non DOM objects?
Jani Hartikainen about 10 years

This does not work in Safari on certain DOM properties such as el.style.width
Ivan Plyusnin over 9 years

After using watch, i can't iterate through attributes. Maybe better to remove line with "delete this[prop]" ?
Admin over 9 years

IE8 shows error on line "Object.defineProperty(this, prop, {" - the command is not supported by the object.
Admin over 9 years

@Eli Grey. I think that if your solution works in IE8 only for DOM object you MUST note it.
Admin about 9 years

I think this code should work great for POCO object. For DOM element, you should consider attrchange library(github.com/meetselva/attrchange).
Admin about 9 years

For any other object types(rather than POCO object), I think we should not use this function to detect change because it may causes a problem because most of they are native code. It should not be a good idea to modify them.
neaumusic almost 8 years

can't watch constants, -1
Maria almost 6 years

when you console.log() that object, the watched property is hidden!!!! how to fix??