JSON为什么会有循环引用

JSON为什么会有循环引用？——从数据结构到序列化的深度解析

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，以其简洁、易读的特性成为前后端通信、API数据传输的主流选择，我们日常使用JSON时，大多处理的是“树状”结构的数据——每个对象嵌套其他对象或数组，且最终能追溯到不可再分的“叶子节点”（如字符串、数字、布尔值等），当数据结构中出现“循环引用”时，JSON的序列化（Serialization）过程会突然“卡壳”，甚至抛出错误，JSON为什么会有循环引用？这种引用的本质是什么？又该如何处理？本文将从数据结构、序列化机制和实际应用场景出发,揭开循环引用背后的底层逻辑。

什么是循环引用？——数据结构中的“闭环”

要理解JSON的循环引用，首先需要明确“引用”和“循环引用”的概念，在编程中，引用（Reference）指向内存中某个对象的地址，多个变量可以通过引用指向同一个对象，实现数据共享，而循环引用（Circular Reference）则指对象之间存在“闭环”依赖：对象A引用对象B，对象B又直接或间接引用对象A，形成“你中有我，我中有你”的无限循环。

在JavaScript中，以下代码就创建了循环引用：

const objA = { name: "A" };
const objB = { name: "B" };
objA.ref = objB;  // A引用B
objB.ref = objA;  // B引用A，形成闭环

如果尝试通过JSON.stringify()将objA转换为JSON字符串，就会抛出错误："Uncaught TypeError: Converting circular structure to JSON"。

JSON的“先天限制”：为什么原生不支持循环引用？

JSON的设计初衷是“数据交换格式”，其核心需求是结构清晰、无歧义、可无损解析，为了实现这一目标，JSON规范对数据结构做了严格限制，而循环引用恰恰违背了这种限制，具体原因可从以下三个层面分析：

数据结构的“树状”本质要求无环

JSON的数据模型本质是“有根树”（Rooted Tree），即每个对象（Object）或数组（Array）必须有一个“根节点”（Root），其他节点通过单向引用从根节点出发可到达，且节点之间不能形成闭环，这种结构确保了数据的“层次性”和“可遍历性”——无论数据多复杂，总能从根节点开始，逐层解析所有叶子节点，而不会陷入无限循环。

而循环引用引入了“图”（Graph）结构，其中节点之间存在双向或多向依赖，如果允许JSON表示循环引用，那么解析器在遍历时可能无限循环：解析objA时遇到ref指向objB，解析objB时又遇到ref指向objA，形成“A→B→A→B→…”的死循环，永远无法完成解析。

序列化算法的“终止条件”依赖无环

JSON.stringify()的核心算法是“深度优先遍历”（Depth-First Traversal），其终止条件是“遇到非对象/数组的值或已遍历过的对象”，对于普通树状结构，算法会沿着引用路径逐层，直到遇到叶子节点（如字符串、数字），然后回溯继续遍历其他分支。

但如果存在循环引用，算法会陷入“无限递归”：假设objA.ref = objB且objB.ref = objA，序列化过程会变成：objA → objB → objA → objB → …，无法自然终止，为了避免程序崩溃，JavaScript引擎必须检测循环引用并在检测到时抛出错误——这是对“算法可终止性”的必要保障。

数据交换的“无歧义性”要求无环

JSON的设计强调“数据与表示的统一性”，即JSON字符串能精确还原原始数据结构，如果允许循环引用，同一个数据结构可能对应多个JSON字符串（取决于遍历顺序），反之亦然，这会导致数据交换的“歧义性”，循环引用的对象A和B，如果JSON序列化时能表示为{"ref": {"ref": <循环引用标记>}}，那么接收方如何区分“循环引用”和“普通嵌套”？这种模糊性会破坏数据交换的可靠性。

循环引用的“常见场景”：为什么实际开发中会遇到？

尽管JSON原生不支持循环引用，但在实际开发中，循环引用却并不罕见，尤其是在复杂对象系统中，以下是几个典型场景：

双向关联的数据模型

在业务逻辑中，双向关联是常见需求，在电商系统中，“用户”和“订单”可能存在双向引用：一个用户可以有多个订单（user.orders = [order1, order2]），每个订单也关联到用户（order.user = user），这种“一对多”的双向关联在内存中自然形成循环引用。

DOM树或组件引用

在前端开发中，DOM元素或React组件之间可能存在循环引用，父组件引用子组件，子组件通过回调函数引用父组件，形成“父→子→父”的闭环，如果尝试将整个组件树序列化为JSON（如用于调试或状态存储），就会触发循环引用问题。

缓存或索引结构

在缓存系统中，为了快速查找，可能会用对象存储键值对，其中值又引用了键本身（或缓存对象引用了存储容器）。

const cache = {};
const data = { key: "value" };
cache[data.key] = data;  // cache.value = data，而data可能又包含对cache的引用

这种“数据与容器相互引用”的结构在缓存、索引场景中很常见。

如何处理循环引用？——从规避到解决方案

既然循环引用是复杂系统中的自然产物，而JSON又无法原生支持，那么实际开发中需要通过策略规避或转换循环引用，以下是几种常见解决方案：

移除循环引用（业务逻辑层面）

如果循环引用并非业务必需，可以直接在序列化前移除，在用户-订单场景中，如果只需要发送用户信息给前端，可以临时移除order.user引用，仅保留user.orders：

const user = { name: "Alice", orders: [] };
const order = { id: 1, product: "Book" };
user.orders.push(order);
order.user = user;  // 循环引用
// 序列化前移除order.user
const userForJSON = {
  ...user,
  orders: user.orders.map(o => ({ id: o.id, product: o.product }))
};
JSON.stringify(userForJSON);  // 正常序列化

使用“替换标记”（序列化层面）

如果需要保留循环引用的“关联关系”，可以在序列化时用特殊标记（如"__CIRCULAR__"）替代循环引用，接收方再根据标记重建关系，使用JSON.stringify()的replacer参数：

const objA = { name: "A" };
const objB = { name: "B" };
objA.ref = objB;
objB.ref = objA;
const seen = new WeakSet();  // 用WeakSet记录已遍历的对象
const json = JSON.stringify(objA, (key, value) => {
  if (typeof value === "object" && value !== null) {
    if (seen.has(value)) {
      return "__CIRCULAR__";  // 遇到循环引用返回标记
    }
    seen.add(value);
  }
  return value;
});
console.log(json);  // {"name":"A","ref":{"name":"B","ref":"__CIRCULAR__"}}

接收方解析后，可根据"__CIRCULAR__"标记手动重建循环引用（需结合业务逻辑）。

使用支持循环引用的序列化库

对于需要频繁处理循环引用的场景（如复杂状态管理、数据持久化），可以使用支持循环引用的序列化库，如flatted、cycle.js等，这些库通过“唯一标识符”替代直接引用，在序列化和反序列化时重建循环关系。flatted的使用方式：

import { parse, stringify } from 'flatted';
const objA = { name: "A" };
const objB = { name: "B" };
objA.ref = objB;
objB.ref = objA;
const json = stringify(objA);  // 正常序列化
const parsed = parse(json);   // 正确反序列化，保留循环引用
console.log(parsed.ref.ref === parsed);  // true

结构化数据转换（如转换为树状结构）

对于图结构的数据（如包含循环引用的社交网络关系），可以先将图转换为“树状+引用ID”的结构，序列化后再由接收方重建。

const nodeA = { id: "

正文

JSON为什么会有循环引用