Store state of a JavaScript Object

Question

Im trying to store the stats of 'this' in my javscript object so that later on in my application I can return 'this' to a previous state. I thought I could accomplish using a closure but so far I haven't successful. My idea was to do something like this

function SavedFeature() {
    var self = this;

    this.savedItem;

    this.storeState = function() {
        this.savedItem = storeClosure();
    }

    function storeClosure() {
        var closure = self;
        return function() {
            return closure;
        };
    };

    //other things the user can change...
}

so later on in my application if I needed to return to the point when I called storeState I could just do

//return the object I put in my closure
var backToNormal = savedFeature.savedItem();

that doesn't work though because any changes to my savedFeature object after I call storeState() are being reflected in the item im retrieving from called savedItem(). I'm guessing this is happening because closure is being set to a reference of self instead of copied to a new instance.

Is there anyway to store the state of my entire object in a closure like this or do I need to store this some other way.

Answer 1

There are dozens of ways how to implement it. I will do just simple one. saving property. Take into account if you want to save entire object you need to do deep copy of the object.

this is your feature:

function SavedFeature() {
        this.savedItem = {'isNew': true};
        this.stateMachine = new StateMachine();
}

this is some kind of state machine:

function StateMachine () {
      var state = { 'isNew' : null};
      function set(newState) {
         state.isNew = newState.isNew;
      }
      function get() {
         return state.isNew;
      }
      return {
      get : get,
      set : set
      };
    }

which, know how to store isNew property

and a working sample:

 var savedFeature = new SavedFeature();
 console.log(savedFeature.savedItem); //  true by default

 savedFeature.stateMachine.set(savedFeature.savedItem); // saving state.
 savedFeature.savedItem.isNew = false; // modifying state
 console.log(savedFeature.savedItem); // return false, because of statement above

 var restoredState = savedFeature.stateMachine.get(); // restoring state
 console.log(restoredState); // true

 savedFeature.savedItem.isNew = restoredState.isNew;
 console.log(savedFeature.savedItem); // true

you can adjust that code, and reach functionality whatever you need. hope that helps

Answer 2

The issue you are running into is that in js objects are passed by reference. This means that all changes performed on your object will apply to your obj.savedItem property.

Fix: Store a deep clone into obj.savedItem

 this.storeState = function() {
     this.savedItem = _.cloneDeep(this); // or _.clone(this, true);
 }

cloneDeep is a lodash method, most js libs supply one of their own, e.g. jQuery's $.extend, etc.

You could easily roll your own deep clone function, look up the options on this thread.

A complete example with jQuery:

function SavedFeature() {
    this.savedItem;

    this.clone = function() {
       return $.extend(true, {}, this);
    },

    this.storeState = function() {
        this.savedItem = this.clone();
    }
}

Doing it this way allows you adapt to different environments by changing your clone method as it is facading the used library method.