如何检测或避免对象属性引用自身/父级引发循环依赖？

可以通过ES6的Proxy来实现这个需求，拦截对象的属性赋值操作，递归检查待赋值的内容是否属于当前对象的上层引用链（自身、父级、更上层对象），如果是则阻止赋值。

实现思路 #

1. 用Proxy拦截对象的set操作，每次赋值前做引用检查
2. 维护一个上层引用链数组，记录当前对象的所有父级、祖先级对象（包括自身）
3. 对待赋值的内容，如果是对象/数组，递归为其创建带引用链检查的Proxy，确保嵌套结构也能被检测

完整代码实现 #

function createSafeObject(target, parentChain = [target]) {
  // 针对对象和数组做代理，基本类型直接返回
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  return new Proxy(target, {
    set(obj, prop, value) {
      // 检查待赋值的内容是否存在于上层引用链中
      if (parentChain.includes(value)) {
        console.error(`禁止赋值：属性${String(prop)}不能引用自身或上层对象`);
        return false; // 阻止赋值
      }

      // 如果赋值的是对象/数组，递归创建带引用链的代理，更新引用链（加上当前对象）
      const newChain = [...parentChain, obj];
      obj[prop] = createSafeObject(value, newChain);
      return true;
    }
  });
}

测试示例 #

1. 阻止自身引用

const someObject = createSafeObject({a: 'A'});
someObject['b'] = someObject; // 输出错误：禁止赋值：属性b不能引用自身或上层对象
console.log(someObject.b); // undefined，赋值被阻止

2. 阻止嵌套对象引用父级

const parent = createSafeObject({name: 'parent'});
parent.child = {};
parent.child.parent = parent; // 输出错误：禁止赋值：属性parent不能引用自身或上层对象

3. 阻止数组内对象引用顶层父级

const topObj = createSafeObject({items: []});
topObj.items.push({});
topObj.items[0].top = topObj; // 输出错误：禁止赋值：属性top不能引用自身或上层对象

注意事项 #

• 该实现仅拦截属性赋值操作，如果是通过Object.defineProperty这类方法修改对象，需要额外扩展拦截逻辑
• 引用检查基于对象的内存地址，克隆后的对象（内存地址不同）不会被拦截
• 多层嵌套的交叉引用场景也能被有效检测

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