如何从JSON序列化的JavaScript对象中恢复类方法？

问题根源 #

JSON序列化（JSON.stringify）只会处理对象的可枚举自有属性，原型链上的类方法（比如Foo.prototype.sum）不会被序列化。反序列化（JSON.parse）得到的是普通JavaScript对象，而非原类的实例，因此无法调用类方法。

推荐解决方案：给类添加内置重构方法 #

这是最灵活、易维护的方案，能适配类的更新和嵌套数据结构。核心思路是在类中定义一个静态方法，负责从普通对象重建类实例。

基础实现

class Foo {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    sum() {
        return this.a + this.b;
    }

    // 静态方法：从普通对象重建Foo实例
    static from(obj) {
        // 直接将对象属性传入构造函数，类更新时只需维护constructor即可
        return new Foo(obj.a, obj.b);
    }

    // 可选：控制序列化输出（确保所有需要的属性都被序列化）
    toJSON() {
        return { ...this };
    }
}

使用方式

// 存入localStorage
const bar = new Foo(2, 5);
localStorage.savedBar = JSON.stringify(bar);

// 取出并重建实例
const rawObj = JSON.parse(localStorage.savedBar);
const retrievedBar = Foo.from(rawObj);

retrievedBar.sum(); // 7，正常执行

适配嵌套数据结构

如果类包含其他类的实例，只需在from方法中递归调用对应类的重构方法：

class Bar {
    constructor(c) {
        this.c = c;
    }

    static from(obj) {
        return new Bar(obj.c);
    }
}

class Foo {
    constructor(a, b, childBar) {
        this.a = a;
        this.b = b;
        this.childBar = childBar;
    }

    sumTotal() {
        return this.a + this.b + this.childBar.c;
    }

    static from(obj) {
        return new Foo(
            obj.a,
            obj.b,
            obj.childBar ? Bar.from(obj.childBar) : null
        );
    }
}

适配类更新

如果后续给Foo新增参数（比如c），改用对象解构传入构造函数可以让from方法无需修改：

class Foo {
    // 改用对象解构，新增参数无需修改from方法
    constructor({ a, b, c = 0 }) {
        this.a = a;
        this.b = b;
        this.c = c;
    }

    sumAll() {
        return this.a + this.b + this.c;
    }

    static from(obj) {
        // 直接传入整个对象，无需修改
        return new Foo(obj);
    }
}

快速但受限的方案：修改原型链 #

如果你的类没有复杂的初始化逻辑（比如默认值、属性校验），可以直接修改反序列化对象的原型链：

const rawObj = JSON.parse(localStorage.savedBar);
Object.setPrototypeOf(rawObj, Foo.prototype);

rawObj.sum(); // 7，能正常执行

⚠️ 注意：这种方式不会执行类的构造函数，若类在初始化时有额外处理（比如给属性设默认值），会导致实例状态异常，不推荐用于复杂场景。

总结 #

标准解决方案是给类添加静态重构方法（如from），这种方式既保证了实例的完整性，又能轻松处理嵌套结构和类的后续更新，是社区广泛采用的实践。

内容的提问来源于stack exchange，提问作者Colebot