Question

In Firefox, I’ve got several objects that I need to trigger an event when a particular property of each is changed. I’m using object.watch(), however when I return the value of the property that was changed using “this”, it returns the old value the first time, and “undefined” the second and subsequent times:

var myObject = {
        "aProperty": 1
    };

function propChanged(prop) {
    alert(prop);
}

myObject.watch("aProperty", function () {
    propChanged(this.aProperty);
});

myObject.aProperty = 2;//alerts "1"
myObject.aProperty = 3;//alerts "undefined"

The reason I can’t just say alert(myObject.aProperty) is because this is meant to be a dynamic code that will apply the event handler to several, possibly unknown objects.

I’m just unsure exactly how to dynamically get the new value of the property using the watch method. I’m setting up a prototype for IE for this, so I’m not worried about it not working there. I just need to understand “this” and how it applies to the watch method’s owner.

Edit>>

Here’s the new code I’m using for cross browser, including the IE et al prototype:

var myObject = {};

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

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


function propChanged(t, p, o, n) {
    alert(o);
}

Object.defineProperty(myObject, "aProperty", {value: 2,
    writable: true,
    enumerable: true,
    configurable: true});

myObject.watch("aProperty", propChanged);

myObject.aProperty = 3; //alerts 3
myObject.aProperty = 4;  //alerts 4 (n is undefined in propChanged?

Answer 1

You need to return the value you want the property to have from the function you pass to watch.

myObject.watch("aProperty", function (prop, oldval, newval) {
    propChanged(newVal);
    return newVal;
});

should do it.

See the MDN docs for a full detail of the function but the relevant bit is

Watches for assignment to a property named prop in this object, calling handler(prop, oldval, newval) whenever prop is set and storing the return value in that property. A watchpoint can filter (or nullify) the value assignment, by returning a modified newval (or by returning oldval).

EDIT

Your edited code might work better this way

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