巧用 JSON.stringify() 和 JSON.parse() 解析带函数的 JavaScript 对象

理解 JSON.stringify() 的局限性

JSON.stringify() 是一个强大的 JavaScript 函数，它允许我们轻松地将 JavaScript 对象转换为 JSON 字符串。然而，它有一个明显的限制：它会过滤掉对象中值为函数的键，这给处理包含函数的复杂对象带来了挑战。

例如，考虑以下 JavaScript 对象：

const obj = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, world!");
  }
};

如果我们尝试使用 JSON.stringify() 将此对象转换为 JSON 字符串，则结果将是：

{"name":"John Doe","age":30}

可以看到，greet 函数键及其对应的值已从 JSON 字符串中消失了。这是因为 JSON 规范不允许函数作为值。

通过字符串化 JSON 修复函数

为了克服这个限制，我们可以使用一种技巧，通过将函数转换为字符串来欺骗 JSON.stringify()。我们可以使用 Function.toString() 方法将函数转换为字符串表示形式。

改进后的示例如下：

const obj = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, world!");
  }.toString() // 将函数转换为字符串
};

现在，当我们使用 JSON.stringify() 序列化此对象时，它会将 greet 函数的字符串表示形式包含在结果 JSON 字符串中：

{"name":"John Doe","age":30,"greet":"function() {\n    console.log(\"Hello, world!\");\n}"}

使用 JSON.parse() 解析带函数的对象

反序列化此 JSON 字符串并保留函数值需要一些额外的处理。JSON.parse() 无法直接恢复函数，因为它需要一个函数表达式才能正确创建它。

我们可以通过使用 eval() 函数和一些巧妙的字符串操作来解决这个问题。eval() 函数允许我们执行包含在字符串中的 JavaScript 代码，我们可以利用这一点来重新创建 greet 函数。

const jsonStr = '{"name":"John Doe","age":30,"greet":"function() {\n    console.log(\"Hello, world!\");\n}"}';

const obj = JSON.parse(jsonStr, function(key, value) {
  if (typeof value === "string" && value.startsWith("function")) {
    // 将函数字符串重新转换为函数
    return eval("(" + value + ")");
  }

  return value;
});

console.log(obj.greet()); // 输出: "Hello, world!"

替代方案：使用代理对象

除了通过字符串化 JSON 的方法外，我们还可以使用代理对象来保留函数。代理对象将一个非序列化对象包装在一个序列化对象中，允许在反序列化后访问原始对象。

例如，我们可以创建以下代理对象：

const proxyObj = new Proxy(obj, {
  get: function(target, property) {
    // 如果属性值为函数，则返回原始函数
    if (typeof target[property] === "function") {
      return target[property];
    }

    // 否则，返回原始值的字符串表示形式
    return JSON.stringify(target[property]);
  },
  set: function(target, property, value) {
    // 如果值不是函数，则更新原始对象
    if (typeof value !== "function") {
      target[property] = value;
    }

    return true;
  }
});

现在，我们可以使用 JSON.stringify() 序列化代理对象，它会保留原始对象的函数：

{"name":"John Doe","age":30,"greet":"[function]"}

反序列化此 JSON 字符串并获取原始函数时，我们可以使用 Proxy.get() 拦截器来检索它。

const jsonStr = '{"name":"John Doe","age":30,"greet":"[function]"}';

const proxyObj = JSON.parse(jsonStr, function(key, value) {
  if (value === "[function]") {
    // 使用 Proxy.get() 拦截器检索原始函数
    return Proxy.get(obj, "greet");
  }

  return value;
});

console.log(proxyObj.greet()); // 输出: "Hello, world!"

结论

通过字符串化 JSON 或使用代理对象，我们可以克服 JSON.stringify() 无法序列化函数的限制，从而实现包含函数的复杂 JavaScript 对象的完整序列化和反序列化。这些技术使我们能够在不同的环境和应用程序之间无缝交换和处理此类对象，从而提高了 JavaScript 开发的灵活性和可能性。