JavaScript内の親オブジェクト内で子オブジェクトをシリアライズする

Question

この質問は、私の最後の質問へのフォローアップです：JavaScript Serialization and Methodsです。関連しているが、私はこれが異なっていると信じているので、このスレッドを開始した。それにかかわらず...

私はページ間を渡る必要があるオブジェクトの複雑なツリーを持っています。このため、私はオブジェクトをシリアライズしてデシリアライズしようとしています。私のオブジェクトの1つには、いくつかの子オブジェクトのコレクションがあります。それらの子オブジェクト型のそれぞれに、私が呼び出そうとしている関数があります。残念ながら、私は運がない。問題を特定してその問題の底に到達するためにテストプロジェクトをセットアップしました。現在、JavaScriptオブジェクトはobjects.jsという別個のファイルに定義されています。私は、作成シリアライズ、デシリアライズ、および.htmlのファイルにこれらのオブジェクトと対話しようとしています

objects.js

function MyChild() { this.init(); } 
MyChild.prototype = { 
    data: { 
     id: 0, 
     fullName: "", 
    }, 

    init: function() { 

    }, 

    save: function (key) { 

    }, 

    load: function (key) { 

    }, 

    test: function() { 
     alert("Testing Child functions"); 
    } 
} 

function MyParent() { this.init(); } 
MyParent.prototype = { 
    data: { 
     id: "", 
     children: null 
    }, 

    init: function() { 
     this.data.children = []; 
    }, 

    save: function (key) { 
     window.localStorage.setItem(key, JSON.stringify(this.data)); 
    }, 

    load: function (key) { 
     var temp = window.localStorage.getItem(key); 
     if (temp != null) { 
      this.data = JSON.parse(temp); 
      $.each(this.data.children, function (i, r) { 
      }); 
     } 
    }, 

    test: function() { 
     alert("Testing Parent functions"); 
    } 
} 

：このファイルは、次のようになります。それの.htmlファイルはここに示されています：

test.htmlという

<div> 
    <input id="button1" type="button" value="Create Object Tree" onclick="button1Click();" /><br /> 
    <input id="button2" type="button" value="Retrieve and Execute" onclick="button2Click();" /><br /> 
</div> 

<script type="text/javascript"> 
    function button1Click() { 
     var child = new MyChild(); 
     child.data.id = 1; 

     var p = new MyParent(); 
     p.data.id = "A"; 
     p.data.children.push(child); 
     p.save("A"); 
    } 

    function button2Click() { 
     var storedParent = new MyParent(); 
     storedParent.load("A"); 

     storedParent.test();       // This works 
     alert(storedParent.data.children.length);  // This displays "1" like I would expect 
     alert(storedParent.data.children[0].data.id); // This does NOT work. 
     storedParent.data.children[0].test();   // This does NOT work. 
    } 
</script> 

私は私が間違ってやっているかわからないんだけど。誰かが私にこれを理解するのを助けてくれますか？私の例を修正するのを助けてください。 MyChildオブジェクトを適切にシリアライズしていないということがあります。しかし、私はMyParentに関連してどのようにシリアライズ/デシリアライズする必要があるのか​​分かりません。

ありがとうございました！

Answer 1

dataは、prototypeではなく、各オブジェクト内に保存する必要があります。

オブジェクトのprototypeに格納されているデータは、すべてのインスタンス間で共有され、JSON.stringifyによってシリアル化されないため、オブジェクトデータはローカルストレージに保存されません。

this.init()関数内thisにデータを追加、修正する：

MyChild.prototype = { 
    init: function() { 
     this.data = { 
      id: 0, 
      fullName: "" 
     }; 
    }, 
    ... 
} 

MyParent.prototype = { 
    init: function() { 
     this.data = { 
      id: "", 
      children: [] 
     } 
    }, 
    ... 
} 

が検索されたデータにMyChildの機能を取り付けることは難しいであることhttp://jsfiddle.net/alnitak/fdwVB/

注でサンプルを操作。以下のコードは動作するように表示されます。

load: function(key) { 
    var temp = window.localStorage.getItem(key); 
    if (temp != null) { 
     this.data = JSON.parse(temp); 
     var children = this.data.children; 
     for (var i = 0; i < children.length; ++i) { 
      children[i] = $.extend(new MyChild(), children[i]); 
     } 
    } 
}, 

しかし、それは取得した各エントリの新しい「デフォルト」の子供を構築して、シリアライズされた値を使用してその子のデータを上書きすることで動作することに注意してください。

これは、コンストラクタに「副作用」がある場合に問題になる可能性があります。

MyChild()コンストラクタがデフォルト値の代わりに使用する初期値のオプションの完全オブジェクトを使用できるようにする方がよい場合があります。