JavaScript structuredClone不支持函数和DOM节点的限制

structuredClone 是现代浏览器和 Node.js 中提供的用于深度克隆对象的标准 API。它解决了 JSON.parse(JSON.stringify()) 无法处理循环引用和多种数据类型的问题。然而，structuredClone 并不是万能的，它明确不支持函数和 DOM 节点。如果试图克隆这些对象，代码会直接抛出 DataCloneError 异常。要解决这一问题，需要针对不同的数据类型采用特定的处理策略。

1. 验证限制问题

在寻找解决方案前，先确认问题发生的具体场景。通过浏览器控制台运行以下代码，可以直观地看到报错信息。

1. 打开浏览器的开发者工具（F12）。
2. 切换到 Console（控制台）面板。
3. 输入并运行以下代码以测试函数克隆：

const objWithFunc = {
  id: 1,
  getData: function() {
    return 'data';
  }
};

try {
  const clone = structuredClone(objWithFunc);
} catch (error) {
  console.error(error.message);
}

控制台会输出 function() could not be cloned，证明 structuredClone 无法处理函数。

4. 输入并运行以下代码以测试 DOM 节点克隆：

const domObj = {
  node: document.body
};

try {
  const clone = structuredClone(domObj);
} catch (error) {
  console.error(error.message);
}

控制台会输出 DOMException: HTMLBodyElement could not be cloned。

2. 处理 DOM 节点的克隆

DOM 节点之所以不能被 structuredClone 克隆，是因为它们包含浏览器内部的复杂引用和循环结构。对于 DOM 元素，应使用其原生的克隆方法。

1. 获取需要复制的 DOM 节点引用（例如通过 querySelector）。
2. 调用该节点上的 cloneNode() 方法。
3. 传入参数 true 以实现深度克隆（包含子节点），传入 false 则仅克隆节点本身。

// 获取原始节点
const originalNode = document.querySelector('.my-element');

// 深度克隆节点及其所有子节点
const clonedNode = originalNode.cloneNode(true);

// 将克隆的节点插入到文档中
document.body.appendChild(clonedNode);

注意：cloneNode 不会复制绑定到元素上的事件监听器。如果需要保留事件，必须手动重新绑定。

3. 处理函数的克隆

函数是逻辑代码的引用，structuredClone 的设计初衷是传输数据，而非传输逻辑。因此，克隆包含函数的对象时，通常采用“数据与逻辑分离”或“手动混合复制”的策略。

策略 A：手动复制（适用于简单对象）

如果对象结构已知且简单，最直接的方法是展开属性，然后单独把函数挂回去。

1. 使用 structuredClone 克隆对象中的纯数据部分。
2. 手动将函数从源对象赋值给新对象。

const original = {
  data: { value: 100 },
  calculate: function() { return this.data.value * 2; }
};

// 1. 先克隆纯数据（自动忽略 calculate）
const clone = structuredClone(original);

// 2. 手动复制函数引用
clone.calculate = original.calculate;

console.log(clone.calculate()); // 输出 200

策略 B：序列化与反序列化（极端情况）

如果必须将函数通过网络发送或存储（不推荐），可以将函数转换为字符串，并在目标端重新构建。这存在安全风险，需谨慎使用。

1. 调用函数的 toString() 方法获取源码字符串。
2. 存储该字符串。
3. 使用 new Function() 重建函数。

const funcObj = {
  id: 1,
  handler: function(a, b) { return a + b; }
};

// 序列化：将函数转为字符串
const serialized = funcObj.handler.toString();

// 反序列化：重建函数
const restoredFunc = new Function('a', 'b', serialized);

console.log(restoredFunc(1, 2)); // 输出 3

4. 克隆方法决策流程

为了在实际开发中快速选择正确的克隆方式，请参考以下逻辑流程。这个流程涵盖了 structuredClone 的局限性以及针对 DOM 节点和函数的替代方案。

5. 方案对比总结

了解不同克隆方法的特性有助于在编写代码时做出最佳选择。