Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Watch for object properties changes in JavaScript [duplicate]

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?

like image 434
Philippe Avatar asked Aug 13 '09 01:08

Philippe


People also ask

How do you copy properties from one object to another in JavaScript?

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

Can we have two properties with the same name inside an object?

You cannot. Property keys are unique. Follow TravisJ 's advice. You might want to look up the term 'multimap', too.

How do you change the property of an object JavaScript?

To change the value of an existing property of an object, specify the object name followed by: a dot, the name of the property you wish to change, an equals sign, and the new value you wish to assign.

Can objects have same keys JavaScript?

No, JavaScript objects cannot have duplicate keys. The keys must all be unique.


2 Answers

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;
    };
like image 193
Eli Grey Avatar answered Oct 12 '22 16:10

Eli Grey


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

like image 34
Joel Martinez Avatar answered Oct 12 '22 17:10

Joel Martinez