JS深度克隆对象(克隆时包含函数)

在 JavaScript 中,标准的 JSON.stringify()JSON.parse() 无法直接处理函数,因为 JSON 格式不支持函数类型。若要实现对象与 JSON 字符串之间的相互转换,同时保留函数,可采用以下几种方法:

方法一:自定义序列化和反序列化函数

手动遍历对象,将函数转换为字符串存储,再恢复时重新解析为函数。

javascript 复制代码
function objectToJsonWithFunctions(obj) {
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'function') {
      return value.toString();
    }
    return value;
  });
}

function jsonToObjectWithFunctions(jsonStr) {
  return JSON.parse(jsonStr, (key, value) => {
    if (typeof value === 'string' && value.startsWith('function')) {
      // 使用 Function 构造函数重新创建函数
      return new Function(`return ${value}`)();
    }
    return value;
  });
}

// 使用示例
const original = {
  add: function(a, b) { return a + b; },
  greet: () => 'Hello',
  num: 42
};

const jsonStr = objectToJsonWithFunctions(original);
const restored = jsonToObjectWithFunctions(jsonStr);

console.log(restored.add(1, 2)); // 3
console.log(restored.greet());   // 'Hello'

方法二:使用第三方库 serialize-javascript

该库专门处理包含函数的对象序列化和反序列化。

bash 复制代码
npm install serialize-javascript
javascript 复制代码
const serialize = require('serialize-javascript');
const { deserialize } = require('serialize-javascript');

const original = {
  multiply: (a, b) => a * b,
  info: {
    name: 'Test',
    print: function() { console.log(this.name); }
  }
};

// 序列化(包含函数)
const serialized = serialize(original);

// 反序列化
const restored = deserialize(serialized);

console.log(restored.multiply(3, 4)); // 12
restored.info.print(); // 'Test'

方法三:使用 eval()(不推荐,有安全风险)

直接使用 eval() 解析函数字符串,存在代码注入风险,仅适用于受信任环境。

javascript 复制代码
function jsonToObjectWithEval(jsonStr) {
  return JSON.parse(jsonStr, (key, value) => {
    if (typeof value === 'string' && value.match(/^function|^\([^)]*\)\s*=>/)) {
      return eval(`(${value})`); // 注意:存在安全风险
    }
    return value;
  });
}

注意事项

  1. 函数上下文丢失 :反序列化后的函数可能丢失原有的 this 上下文。
  2. 闭包信息丢失:函数内部引用的外部变量无法恢复。
  3. 安全风险 :使用 eval()new Function() 可能执行恶意代码,仅用于受信任数据。
  4. 复杂场景:对于包含正则表达式、日期等特殊对象的函数,可能需要额外处理。

最佳实践

优先使用 方法二serialize-javascript),它能更安全地处理函数序列化,避免常见陷阱:

javascript 复制代码
const serialized = serialize(original, {
  ignoreFunction: false, // 不忽略函数
});

const restored = deserialize(serialized);

通过上述方法,可在 JSON 转换过程中保留函数定义,但需注意函数上下文和安全性问题。

相关推荐
2401_8734794010 分钟前
如何利用IP查询定位识别电商刷单?4个关键指标+工具配置方案
开发语言·tcp/ip·php
我爱cope28 分钟前
【从0开始学设计模式-10| 装饰模式】
java·开发语言·设计模式
菜鸟学Python41 分钟前
Python生态在悄悄改变:FastAPI全面反超,Django和Flask还行吗?
开发语言·python·django·flask·fastapi
浪浪小洋2 小时前
c++ qt课设定制
开发语言·c++
charlie1145141912 小时前
嵌入式C++工程实践第16篇:第四次重构 —— LED模板,从通用GPIO到专用抽象
c语言·开发语言·c++·驱动开发·嵌入式硬件·重构
故事和你912 小时前
洛谷-数据结构1-4-图的基本应用1
开发语言·数据结构·算法·深度优先·动态规划·图论
幺风3 小时前
Claude Code 源码分析 — Tool/MCP/Skill 可扩展工具系统
前端·javascript·ai编程
程序猿编码3 小时前
给你的网络流量穿件“隐形衣“:手把手教你用对称加密打造透明安全隧道
linux·开发语言·网络·安全·linux内核
ID_180079054733 小时前
淘宝 API 上货 / 商品搬家 业务场景实现 + JSON 返回示例
前端·javascript·json
M ? A3 小时前
Vue 动态组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact