Listen for change to Javascript object value

Question

Is it possible (using jQuery or otherwise) to listen for a change in the value of a non-DOM Javascript object (or variable)? So, for instance, I have:

function MyObject()
{
    this.myVar = 0;
}

var myObject = new MyObject();
myObject.myVar = 100;

Is there a way to listen for when the value of myVar changes and call a function? I know that I could use getter/setters, but they aren't supported in previous versions of IE.

possible duplicate of [JavaScript - Watch for object properties changes](http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes) — mplungjan, Jul 14 '11 at 07:48
There is a proposed Object.observe() https://developers.google.com/web/updates/2012/11/Respond-to-change-with-Object-observe — Sergey Ponomarev, May 29 '21 at 16:51

score 12 · Answer 1 · answered Jul 14 '11 at 07:55

Basically you have two options

use non-standard watch method which is available only in Firefox
use getters and setters which are not supported in older IE versions

The third and cross-platform option is to use polling which is not so great

Example of watch

var myObject = new MyObject();

// Works only in Firefox
// Define *watch* for the property
myObject.watch("myVar", function(id, oldval, newval){
    alert("New value: "+newval);
});

myObject.myVar = 100; // should call the alert from *watch*

Example of getters and setters

function MyObject(){
    // use cache variable for the actual value
    this._myVar = undefined;
}

// define setter and getter methods for the property name
Object.defineProperty(MyObject.prototype, "myVar",{
    set: function(val){
        // save the value to the cache variable
        this._myVar = val;
        // run_listener_function_here()
        alert("New value: " + val);
    },
    get: function(){
        // return value from the cache variable
        return this._myVar;
    }
});

var m = new MyObject();
m.myVar = 123; // should call the alert from *setter*

When you say "older versions of IE" does this include IE8? I know it _is_ old, but does it support getter & setters? — evolutionxbox, Jun 04 '14 at 10:38

score 4 · Accepted Answer · edited May 23 '17 at 12:09

4

If IE is important, I guess you are not interested in Watch

But someone seems to have written a shim which makes this question a duplicate

Watch for object properties changes in JavaScript

edited May 23 '17 at 12:09

Community

1
1

answered Jul 14 '11 at 07:45

mplungjan

169,008
28
173
236

This is probably the best solution available - it still excludes IE7, but in a world with IE, nothing can be perfect... :) – redhotvengeance Jul 14 '11 at 08:18
Downvoting without commenting is not helping anyone – mplungjan Oct 15 '15 at 20:02

score 3 · Answer 3 · answered Jul 14 '11 at 07:52

3

You can basically implement such behavior

function MyObject(onMyVarChangedCallback)
{
    this.myVar = 0;

    this.setMyVar = function (val) {
       this.MyVar = val;

       if (onMyVarChangedCallback) {
           onMyVarChangedCallback();
       }
    }
}

function onChangeListener() {
   alert('changed');
}

var o = new MyObject(onChangeListener);

answered Jul 14 '11 at 07:52

Alexander Beletsky

19,453
9
63
86

This wouldn't work with setting the value like a setter though, right? `o.myVar = 100` wouldn't work, it would have to be `o.setMyVar(100)` That's what I'm trying to avoid - I'd like to have it function like a setter, though it looks like that might not be possible when keeping support in all browsers. – redhotvengeance Jul 14 '11 at 07:57

Listen for change to Javascript object value

3 Answers3