Question

Ok, I’m trying to track any changes made to a huge form on a web application. When the page is loaded, I create a JS object that ‘captures’ the initial state of all input fields (selects, radio buttons, checkboxes etc…).
When the user alters the value of any of the literally hundreds of input elements, the new value is tracked in a second object. When the user clicks Update, these two objects are compared and only those values that have been changed are sent, to update the data accordingly.

Rather then building 2 completely separate objects, I thought it wise to use inheritance:

var initialState = getInitialState();//eg:{bar:'1',foo:'bar',atom:'bomb',some:{nested:'objects'}}
var tracker = Object.create(initialState);

As things go, the tracker object might end up looking something like this:

{bar:'0',foo:'bar',atom:'peace',some:{nested:'objects'}}

When calling JSON.stringify on this object in FF and chrome, all is well: only the objects’ own properties are returned. Not so in IE: the tracker has no prototype property, so it would appear that Object.create creates copies rather then inheritance chains?
tracker.__proto__ === initialState returns true, whereas tracker.prototype === initialState evaluates to false, in fact the tracker.prototype property is undefined.

Question1: is there an alternative way to set up an inheritance chain in IE that allows me to peel away the unchanged prototype values?

Question2:I’d also like a method -if at all possible- to set up an inheritance chain that allows for nested objects. As things are now, the nested objects are dealt with by iterating over the main object, using a recursive function. Kind of silly, since that’s what I’m trying to omit.

In short:
I want to know if this is out there:

var a = {bar:'1',foo:'bar',atom:'bomb',some:{nested:'objects'}};
var b = Object.magicDeepCreate(a);//<=== preferably X-browser
b.bar = '0';
b.bar.some.nested = 'stuff';
console.log(JSON.stringify(b));
//{"bar":"0","some":{"nested":"stuff"}}

As always: no jQuery tag, means no jQuery
Note: by IE I mean that monstrosity IE8, not IE9 (company policy, sadly)

Answer 1

tracker.__proto__ === initialState returns true, whereas tracker.prototype === initialState evaluates to false, in fact the tracker.prototype property is undefined.

The __proto__ property is non-standard and FF-only. To get the prototype object of an object, use Object.getPrototypeOf(). The prototype property of function objects is a property referencing the object from which all instances of that function (created using new) inherit.

Not so in IE

Object.create() is not supported at all in IE8. Did you use the common shim or does it silently fail? Or did you even use a function that really copies all properties?

Object.magicDeepCreate(a), preferably X-browser

That should be simple, assuming that all target browsers implement Object.create:

Object.deepCreate = function deepCreate(o) {
    var res = Object.create(o);
    for (var i in o)
        if (Object.hasOwnProperty(o, i) && typeof o[i] == "object")
             res[i] = deepCreate(o[i]);
    return res;
};

stringify only those that have been altered

That should be standard behaviour of JSON.stringify – the prototype object is not taken into account.

However, I’m not sure why you need inheritance at all for that tracker object. Just use an empty object, and add all properties that have been altered. If you want to delete those that have been reset to initial state, you could store that in an extra object to compare with – but there is no reason for inheritance. Just use:

Object.emptyStructure = function s(o){
    var res = {};
    for (var i in o)
        if (typeof o[i] == "object")
            res[i] = s(o[i]);
    return res;
};
var initialState = getInitialState();
var tracker = Object.emptyStructure(initialState);

// set:
if (newVal == initialState.some.nested)
    delete tracker.some.nested;
else
    tracker.some.nested = newVal;