JavaScript序列化和方法

Question

我是"面向对象"JavaScript的新手.目前,我有一个需要跨页面传递的对象.我的对象定义如下:

function MyObject() { this.init(); }
MyObject.prototype = {
    property1: "",
    property2: "",

    init: function () {
        this.property1 = "First";
        this.property2 = "Second";
    },

    test: function() {
      alert("Executing test!");
    }
}

在我的应用程序的第1页上,我正在创建一个MyObject实例.然后我将序列化对象并将其存储在本地存储中.我正在这样做,如下所示:

var mo = new MyObject();
mo.test();                                    // This works
window.localStorage.setItem("myObject", JSON.stringify(mo));

现在,在第2页上,我需要获取该对象并使用它.要检索它,我使用以下内容:

var mo = window.localStorage.getItem("myObject");
mo = JSON.parse(mo);
alert(mo.property1);    // This shows "First" as expected.
mo.test();              // This does not work. In fact, I get a "TypeError"  that says "undefined method" in the consol window.

基于输出,看起来当我序列化对象时,不知何故函数被丢弃.我仍然可以看到属性.但我不能与我的任何功能互动.我究竟做错了什么？

Answer 1

JSON不会序列化函数.

看看这里的第二段.

如果需要保留这些值,可以在序列化时或在反序列化之前转换值,以使JSON能够表示其他数据类型.

换句话说,如果您真的想要JSONify函数,可以在序列化之前将它们转换为字符串:

mo.init = ''+mo.init;
mo.test = ''+mo.test;

反序列化后,将它们转换回函数.

mo.init = eval(mo.init);
mo.test = eval(mo.test);

但是,没有理由这样做.相反,您可以让MyObject构造函数接受一个简单的对象(如解析JSON字符串所示)并将对象的属性复制到自身.

Answer 2

函数无法序列化为 JSON 对象。

因此，我建议您为实际属性创建一个单独的对象（或对象内的属性），然后序列化这部分。之后，您可以使用其所有功能实例化对象，并重新应用所有属性以重新获得对工作对象的访问权限。

按照您的示例，这可能如下所示：

function MyObject() { this.init(); }
MyObject.prototype = {
    data: {
      property1: "",
      property2: ""
    },

    init: function () {
        this.property1 = "First";
        this.property2 = "Second";
    },

    test: function() {
      alert("Executing test!");
    },


   save: function( id ) {
     window.localStorage.setItem( id, JSON.stringify(this.data));
   },
   load: function( id ) {
     this.data = JSON.parse( window.getItem( id ) );
   }

}