使用structuredClone复制含函数的对象时触发DOMException错误求助

首先明确报错原因：structuredClone API 不支持克隆函数、Symbol、DOM节点这类无法被结构化克隆的类型，所以当你的对象包含函数属性时，就会抛出这个DOMException。

下面给几种可行的解决方案：

1. 手动实现支持函数的深拷贝函数 #

自己写一个深拷贝逻辑，专门处理函数类型：

function deepCopy(obj) {
  // 处理null、undefined或非对象/函数类型
  if (obj === null || typeof obj !== 'object' && typeof obj !== 'function') return obj;
  
  // 处理数组
  if (obj instanceof Array) {
    return obj.map(item => deepCopy(item));
  }
  
  // 处理函数：直接返回原函数（函数本身是引用类型，深拷贝函数一般就是保留其引用）
  if (typeof obj === 'function') {
    return obj;
  }
  
  // 处理普通对象
  const clonedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepCopy(obj[key]);
    }
  }
  return clonedObj;
}

// 使用方式
const deepCopyResult = deepCopy(existingObjWithFns);

这个方法的优势是完全可控，不需要依赖第三方，适合自定义需求场景。

2. 基于JSON序列化的变通方案（适合简单函数场景） #

如果你的函数没有依赖闭包、上下文等，可以把函数转成字符串序列化，之后再恢复：

function deepCopyWithFns(obj) {
  // 序列化时把函数转为字符串
  const stringifyReplacer = (key, value) => {
    if (typeof value === 'function') {
      return value.toString();
    }
    return value;
  };
  const serialized = JSON.stringify(obj, stringifyReplacer);
  
  // 反序列化时把字符串转回函数
  const parseReviver = (key, value) => {
    if (typeof value === 'string' && value.startsWith('function')) {
      return new Function(`return ${value}`)();
    }
    return value;
  };
  
  return JSON.parse(serialized, parseReviver);
}

// 使用方式
const deepCopyResult = deepCopyWithFns(existingObjWithFns);

⚠️ 注意：这种方法会丢失函数的闭包上下文，箭头函数恢复后可能出现异常，仅适合无依赖的简单函数。

3. 使用第三方库（推荐成熟方案） #

比如Lodash的_.cloneDeep方法，原生支持克隆函数、Symbol等类型，处理逻辑成熟：

// 先确保项目已安装lodash，引入后使用
// import _ from 'lodash';

const deepCopyResult = _.cloneDeep(existingObjWithFns);

如果你的项目已经依赖Lodash，这是最省心的方案，不需要自己处理各种边缘情况。

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