title: Javascript Serialization of Typed Objects
body: <p>I'm unclear how serialization/de-serialization is supposed to work on typed objects in JavaScript.  For example, I have a "MapLayer" object that contains various members and arrays.  I have written (but not yet tested) the following code to attempt to serialize it:</p>
  
  <pre><code>MapLayer.prototype.serialize = function() {
     var result = "{tileset:tilesets." + tilesets.getTilesetName(this.tileset) + ",columns:" + this.columns + ",rows:" + this.rows + 
     ",offsetX:" + this.offsetX + ",offsetY:" + this.offsetY + ",currentX:" + this.currentX + ",currentY:" + this.currentY + 
     ",scrollRateX:" + this.scrollRateX + ",scrollRateY:" + this.scrollRateY + ",virtualColumns:" + this.virtualColumns + ",virtualRows:" + this.virtualRows +
     ",tiles:\"" + this.encodeTileData2() + "\"";
     for(key in this)
     {
        if(this[key] instanceof Sprite)
           result += "," + key + ":" + this[key].serialize();
     }
     return result;
  }
  </code></pre>
  
  <p>My question is, how is the resulting object supposed to get deserialized as a MapLayer object rather than as a generic Object.  And how are all the Sprite instances supposed to get deserialized as sprites.  Should I be using "new MapLayer()" instead of "{}"?  Or am I simply supposed to include the prototype and constructor properties of the object in the serialization?  Anything else I'm missing?  Am I doing this a stupid way?  There are 2 reasons I'm not using generic serialization/de-serialization code:</p>
  
  <ol>
  <li>I want to serialize the tile data in an optimized format rather than storing a base-10 string representation for each tile, and have them all delimited by commas.</li>
  <li>I don't want to serialize the tileset as an object that gets constructed as a new object during de-serialization, but rather as a reference to an existing object.  Is that possible using code like I have proposed above?</li>
  </ol>
  
  <p><strong>Edit:</strong>  Excuse my lack of proper terminology; JavaScript is one of my less expert languages.  What I mean when I said "Typed Object" is an object with a constructor.  In this example, my constructor is:</p>
  
  <pre><code>function MapLayer(map, tileset, columns, rows, virtualColumns, virtualRows, offsetX, offsetY, scrollRateX, scrollRateY, priority, tileData) {
     this.map = map;
     this.tileset = tileset;
     this.columns = columns;
     this.rows = rows;
     this.offsetX = offsetX;
     this.offsetY = offsetY;
     this.currentX = offsetX;
     this.currentY = offsetY;
     this.scrollRateX = scrollRateX;
     this.scrollRateY = scrollRateY;
     if(tileData.length &lt; columns * rows * 2)
        this.tiles = DecodeData1(tileData);
     else
        this.tiles = DecodeData2(tileData);
     this.virtualColumns = virtualColumns ? virtualColumns : columns;
     this.virtualRows = virtualRows ? virtualRows : rows;
  }
  </code></pre>
  
  <p><strong>Edit 2:</strong> Taking the code from Šime Vidas' answer, I have added a related object called "Device":</p>
  
  <pre><code>function Device( description, memory ) {
      this.description = description;
      this.memory = memory;
  }
  
  function Person( name, sex, age, devices ) {
      this.name = name;
      this.sex = sex; 
      this.age = age;
      this.devices = devices;
  }
  
  Person.deserialize = function ( input ) {
      var obj = JSON.parse( input );
      return new Person( obj.name, obj.sex, obj.age, obj.devices );
  };
  
  var device = new Device( 'Blackberry', 64);
  var device2 = new Device( 'Playstation 3', 600000);
  var person = new Person( 'John', 'male', 25, [device, device2] );
  
  var string = JSON.stringify(person);
  console.log( string );
  
  var person2 = Person.deserialize( string );
  console.log( person2 );
  console.log( person2 instanceof Person );
  </code></pre>
  
  <p>Now the question is how best to incorporate such dependent objects, because once again, the "type" (prototype?) of the object gets lost by JSON.  Instead of running the constructor, why don't we simply change the serialize and the de-serialize functions to ensure that the object only needs to be constructed once like this instead of created and copied?</p>
  
  <pre><code>Person.prototype.serialize = function () {
      var obj = this; 
      return '({ ' + Object.getOwnPropertyNames( this ).map( function ( key ) {
          var value = obj[key];
          if ( typeof value === 'string' ) { value = '"' + value + '"'; }
          return key + ': ' + value;
      }).join( ', ' ) + ',"__proto__":Person.prototype})'; 
  };
  
  Person.deserialize = function ( input ) {
      return eval( input );
  };
  </code></pre>
  
  <p><strong>Edit 3:</strong>
  Another problem I have is that JSON doesn't seem to work in IE9.  I'm using this test file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Script test&lt;/title&gt;
  &lt;script language="javascript"&gt;
  console.log(JSON);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the console outputs:</p>
  
  <pre><code>SCRIPT5009: 'JSON' is undefined 
  test.html, line 5 character 1
  </code></pre>
  
  <p><strong>Edit 4:</strong>
  To correct the JSON problem I must include the correct DOCTYPE tag at the beginning.</p>