浏览器控制台通过(own)标记、console.dir()分层视图、hasOwnProperty()与in操作符对比、__proto__与constructor.prototype一致性检查四种方式区分实例与原型属性。

在控制台打印对象时,实例属性和原型属性默认混在一起显示,但可以通过观察属性位置、使用特定方法或展开结构来区分。关键不是“靠眼力猜”,而是利用浏览器开发者工具的视觉提示和 JavaScript 的内置机制主动识别。
看属性是否带“(own)”标记
现代浏览器(Chrome、Edge、Firefox)在控制台打印对象时,会为**对象自身拥有的属性**自动标注 (own),而原型链上的属性不带该标记,且通常缩进更深、灰度更高。
- 展开对象后,直接看到某属性名右侧有 (own) → 属于实例自身
- 没有标记、且位于“__proto__”折叠区块下 → 来自原型
- 例如:
obj.name显示为name: "Alice" <font color="gray">(own)</font>;而obj.toString一般出现在 __proto__ 下,无标记
用 console.dir() 查看分层结构
console.log(obj) 是简略视图,console.dir(obj) 才是完整、可交互的属性树,明确分离了 “Own Properties” 和 “Prototype” 两个区域。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 展开后左侧栏清晰列出 “Own Properties” —— 这里全是实例自身的属性
- 继续展开
节点,就能逐级看到从 Constructor.prototype到Object.prototype的继承链 - 比如:构造函数
Person的实例p,console.dir(p)中name在 Own Properties,sayHi在Person.prototype下
用 hasOwnProperty() 和 in 操作符验证
在控制台输入表达式,快速判断某个属性归属:
立即学习“Java免费学习笔记(深入)”;
-
obj.hasOwnProperty('prop')→ true 表示是实例自身属性 -
'prop' in obj→ true 表示自身或原型链上存在(只要能访问到) - 对比两者结果即可定位:若
in为 true 但hasOwnProperty为 false,说明该属性来自原型 - 例如:
arr = [1,2]; arr.hasOwnProperty('length')返回 true(数组实例自有 length);arr.hasOwnProperty('push')返回 false(push 来自 Array.prototype)
检查 __proto__ 与 constructor.prototype 是否一致
这是理解根源的方式:实例的隐式原型 __proto__ 应等于其构造函数的显式原型 constructor.prototype。如果某属性出现在后者中,就属于原型属性。
- 执行
obj.__proto__ === ObjConstructor.prototype,通常返回 true - 再查
ObjConstructor.prototype.propName是否存在,存在即为原型属性 - 注意:
obj.__proto__.propName能读取 ≠ 它是obj自身的——这只是原型链查找的结果


















