如何通过控制台查找子属性的父属性？含foo.foo场景问询

Hey there! Let's break down your two questions step by step, with practical console tricks you can use right away:

There are a few reliable ways to track down the parent object of a known sub-property in the browser console:

• Recursive traversal of global objects
  If the sub-property lives somewhere in the global window scope, you can write a small recursive function to scan all objects and find which one contains your target property. Here's a ready-to-use snippet:

  function findParentObject(targetPropName) {
    const visited = new WeakSet(); // Avoid circular reference loops
  
    function traverse(obj, currentPath = '') {
      if (visited.has(obj)) return null;
      visited.add(obj);
  
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const fullPath = currentPath ? `${currentPath}.${key}` : key;
          // Check if current key matches the target sub-property
          if (key === targetPropName) {
            console.log(`找到父对象路径: ${currentPath || 'window'}`);
            return obj;
          }
          // Recurse into nested objects
          if (typeof obj[key] === 'object' && obj[key] !== null) {
            const result = traverse(obj[key], fullPath);
            if (result) return result;
          }
        }
      }
      return null;
    }
  
    return traverse(window);
  }
  
  // 使用示例：查找名为'foo'的子属性的父对象
  const parentObj = findParentObject('foo');
  

• 通过属性值查找
  如果你已经能访问子属性的值（比如const subVal = someObj.someProp），可以修改函数匹配值而非属性名：

  function findParentByValue(targetValue) {
    const visited = new WeakSet();
  
    function traverse(obj) {
      if (visited.has(obj)) return null;
      visited.add(obj);
  
      for (const key in obj) {
        if (obj[key] === targetValue) {
          console.log(`父对象:`, obj);
          console.log(`子属性名: ${key}`);
          return obj;
        }
        if (typeof obj[key] === 'object' && obj[key] !== null) {
          const result = traverse(obj[key]);
          if (result) return result;
        }
      }
      return null;
    }
  
    return traverse(window);
  }
  
  // 使用示例：查找foo.foo值对应的父对象
  const target = foo.foo;
  const parentObj = findParentByValue(target);
  

• 浏览器控制台UI技巧
  在Chrome/Firefox开发者工具中：

1. 打印子属性值（比如console.log(foo.foo)）。
2. 右键点击控制台输出中的这个值。
3. 选择在检查器中显示（Chrome）或在对象检查器中显示（Firefox）。
4. 检查器会高亮包含该子属性的父对象，你可以在控制台用$0引用当前选中的对象。

当然可以！这里的父属性就是包含foo的对象（也就是顶层的foo对象本身）。以下是具体方法：

• 使用问题1中的遍历函数
  运行findParentObject('foo')（因为子属性名为foo），函数会返回父对象foo。拿到它之后，你可以直接调用其方法或访问其他属性：

  const parentFoo = findParentObject('foo');
  // 如果parentFoo有bar()方法，直接调用：
  parentFoo.bar();
  // 或者访问其他属性：
  console.log(parentFoo.someOtherProp);
  

• 通过检查器直接引用
  用前面提到的UI技巧：在检查器中找到foo.foo后，其父对象foo会显示在对象树中。点击选中它，然后在控制台用$0引用并调用：

  // $0指代检查器中当前选中的父对象
  $0.bar(); // 调用父属性的方法
  

• 已知部分路径时的快速查找
  即使不知道完整路径，只要知道子属性是xxx.foo的形式，你可以从常见全局对象开始扫描，或者用遍历函数精准定位父对象。

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