console.dir(obj, { depth: null }) 可强制无限展开对象原型链,清晰展示每层 __proto__ 来源(如 Person.prototype)、constructor 及属性归属,配合 hasOwnProperty 和右键“Store as global variable”可精准定位继承关系。

直接在控制台用 __proto__ 展开对象的隐式原型链,是理解 JavaScript 对象继承关系最直观的方式。它不依赖任何工具或插件,只要打开开发者工具就能逐层“透视”数据结构的底层拓扑。
从实例对象开始,一层层点开 __proto__
选中一个你关心的对象(比如 const arr = [1, 2, 3] 或 const p = new Person('李四')),在控制台输入变量名回车,然后点击右侧展开箭头,找到 __proto__ 属性并逐级点击展开:
- 每展开一次
__proto__,你就进入上一级原型对象 - 看到
constructor属性,能快速确认当前层由哪个构造函数创建 - 遇到
__proto__: null就到顶了——说明已抵达原型链终点
对比多个对象的 __proto__ 链,识别共性与差异
把不同类型的对象(如数组、日期、自定义类实例)同时打印出来,分别展开它们的 __proto__,横向对比:
- 所有对象最终都通向
Object.prototype,验证“一切皆对象”的本质 - 数组有
push/pop,但普通对象没有——这些方法就挂在Array.prototype上 - 自定义类实例的
__proto__指向MyClass.prototype,再往上才是Object.prototype
用 console.dir() 强制显示完整原型链视图
console.log(obj) 有时会折叠原型信息,改用 console.dir(obj, { depth: null }):
-
depth: null表示无限展开,避免手动点太多层 - 输出中会清晰标出每个
__proto__的来源(例如Person.prototype或Array.prototype) - 配合右键“Store as global variable”,可对某一层原型单独分析(如
temp1.__proto__)
结合 constructor 和 hasOwnProperty 辅助定位
单看 __proto__ 展开可能分不清属性来自哪一层。这时穿插使用:
-
obj.constructor.name看它“自称”是谁创建的 -
obj.hasOwnProperty('xxx')判断某个属性是否属于自身,还是从原型链继承而来 -
obj.__proto__.hasOwnProperty('toString')可验证toString是从Object.prototype继承的
这种方式不需要额外库,也不依赖 class 语法糖,直击 JavaScript 原型机制的原始形态,特别适合排查“为什么这个方法能用”“这个属性到底在哪定义的”这类问题。

















