console.dir()是最直接查看原型链的方式,它以交互树形结构展示对象自身属性、__proto__节点及各层构造函数等信息。

在浏览器开发者工具中,最直接的方式是用 console.dir() 输出对象,它会完整展开原型链,比 console.log() 更清晰展示 __proto__ 和继承关系。
用 console.dir() 展开查看原型结构
console.dir(obj) 会在控制台以可交互树形结构显示对象,包括:
– 自身属性(可编辑)
– __proto__ 节点(点击可逐层展开)
– 每一层的构造函数、方法、是否来自 Object.prototype 等信息
例如:
在控制台中手动访问 __proto__ 逐级查看
在控制台输入表达式可快速跳转原型层级:
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
-
obj.__proto__— 查看第一层原型 -
obj.__proto__.__proto__— 查看第二层(通常是 Object.prototype) -
obj.__proto__.constructor.name— 知道当前原型由哪个构造函数创建 - 对内置对象(如数组),
[].__proto__显示 Array.prototype,再点__proto__就到 Object.prototype
利用“Properties”面板配合“Prototype”筛选
选中一个对象(比如通过断点暂停或 console.dir() 后点击对象图标),在右侧“Properties”面板中:
– 默认显示所有自有属性和原型链上的属性
– 勾选顶部的 “Prototype” 复选框(Chrome/Firefox 支持),可只高亮显示原型链上的成员
– 展开 <prototype> 节点,就能看到从当前对象开始逐级向上的完整继承路径
立即学习“Java免费学习笔记(深入)”;
辅助技巧:打印原型链路径(适合复杂继承)
临时加一段调试代码,把原型链转成易读路径:
function logProtoChain(obj) {let chain = [];
for (let p = obj; p; p = Object.getPrototypeOf(p)) {
chain.push(p.constructor ? p.constructor.name : 'null');
}
console.log('Proto chain:', chain.join(' → '));
}
logProtoChain(new Date()); // 输出:Date → Object → null

















