JavaScript 中原型链怎么在调试对象属性时通过控制台输出分析完整的原型链-js教程-PHP中文网

最直接的方式是用 object.getprototypeof() 递归遍历原型链，标准可靠且兼容性好；增强版可显示构造函数名、是否原生、自有属性等元信息，便于快速定位问题。

javascript 中原型链怎么在调试对象属性时通过控制台输出分析完整的原型链

在 JavaScript 中，调试对象属性时想看清完整的原型链，最直接的方式是使用控制台逐级展开 __proto__，但手动点击太慢且容易遗漏。更高效的方法是用代码自动遍历并输出整条原型链，包括每个环节的构造函数名、是否为原生对象、以及是否有自定义属性。

用 Object.getPrototypeOf() 递归获取原型链

这是标准、可靠的方式，避开已废弃的 __proto__，兼容性好，也符合规范：

从目标对象开始，反复调用 Object.getPrototypeOf(obj)
每次拿到原型后，检查是否为 null（即到达原型链终点）
把每层原型存入数组，最后统一打印

示例代码：

function getPrototypeChain(obj) {
  const chain = [];
  let current = obj;
  while (current !== null) {
    chain.push(current);
    current = Object.getPrototypeOf(current);
  }
  return chain;
}

const arr = [1, 2];
console.log(getPrototypeChain(arr));
// 输出：[Array(2), Array.prototype, Object.prototype, null]

增强版：显示构造函数与关键属性

只看对象本身不够直观，加点元信息能快速定位问题：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

用 constructor.name 显示每层的构造函数名（如 "Array"、"Object"）
用 Object.getOwnPropertyNames() 查看该原型上定义的自有属性（非继承来的）
对 Function.prototype、Array.prototype 等常见原型做标记，方便识别

可直接粘贴到控制台运行：

function inspectPrototypeChain(obj) {
  const chain = [];
  let current = obj;
  while (current !== null) {
    const ctor = current.constructor?.name || '(anonymous)';
    const props = Object.getOwnPropertyNames(current).filter(p => 
      typeof current[p] !== 'function'
    );
    chain.push({
      constructor: ctor,
      isBuiltIn: ['Object', 'Array', 'Function', 'String', 'Number'].includes(ctor),
      ownProperties: props.length > 0 ? props : undefined,
      toString: current.toString()
    });
    current = Object.getPrototypeOf(current);
  }
  console.table(chain);
}

inspectPrototypeChain({a: 1});