JavaScript原型链对象检视问题：访问深层原型属性报错求助

错误原因 #

你遇到的报错核心是DOM原型链上的很多属性是访问器（getter/setter）或绑定了上下文的方法，它们的执行依赖this指向一个符合对应DOM接口的实例（比如document本身）。

当你直接从prototypeOfPrototype（比如Node或更上层的原型对象）上获取这些属性时：

• 访问器属性的getter执行时，this会指向原型对象本身，而非原始的document实例，不符合DOM接口对this的要求，触发类型错误。
• 方法属性如果直接调用（或控制台尝试执行展示），同样因为this指向错误，导致"非法调用"报错。

简单说：DOM原型上的方法/访问器不是孤立的，它们必须依附于有效的DOM实例才能正常工作。

规避方案 #

要复刻控制台的检视功能，需要针对不同类型的属性做特殊处理，核心思路是把属性的执行上下文绑定回原始的DOM实例，同时处理可能的报错。

具体实现代码 #

const target = document;
let currentProto = Object.getPrototypeOf(target);
// 这里以获取两层原型为例，可扩展为递归遍历原型链
const protoOfProto = Object.getPrototypeOf(currentProto);

const keys = Object.getOwnPropertyNames(protoOfProto);
const inspectedValues = keys.map(key => {
    const descriptor = Object.getOwnPropertyDescriptor(protoOfProto, key);
    try {
        if (descriptor.get) {
            // 访问器属性：绑定原始对象上下文获取值
            return descriptor.get.call(target);
        } else if (typeof descriptor.value === 'function') {
            // 方法属性：返回标识字符串，避免直接执行报错
            return `${key}() [bound ${target.constructor.name}]`;
        } else {
            // 普通数据属性：直接返回值
            return protoOfProto[key];
        }
    } catch (err) {
        // 捕获无法访问的属性，返回错误提示
        return `[无法访问 ${key}: ${err.message}]`;
    }
});

console.log(inspectedValues);

关键逻辑说明 #

1. 属性类型判断：用Object.getOwnPropertyDescriptor区分访问器、方法和普通属性，针对不同类型做不同处理。
2. 上下文绑定：访问器属性通过get.call(target)把this绑定回原始的document实例，满足DOM接口的要求。
3. 错误捕获：部分受浏览器安全限制的属性即使绑定上下文也无法访问，通过try/catch捕获错误，避免整个检视流程中断。
4. 方法处理：对于方法属性，不直接返回函数本身（避免误执行），而是返回带标识的字符串，和控制台的展示逻辑一致。

扩展建议 #

如果要实现完整的树形浏览，可以：

• 递归遍历整个原型链，直到null。
• 为每个属性添加展开/折叠的交互，只在用户展开时才去获取属性值（类似控制台的惰性加载），提升性能。

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