JavaScript原型继承工作原理及console.dir原型层级输出疑问

你的代码对应的真实原型链结构确实只有三层，最终指向null，和你执行链式查找得到的结果完全一致，console.dir的多余层级完全是浏览器开发者工具的显示机制导致的，不是真实存在的原型对象。

真实原型链结构（符合ECMAScript规范） #

你给出的示例中，原型链的结构是固定的：

• 第一层：实例对象 obj，由new SimpleFunction()创建
• 第二层：obj.__proto__，指向构造函数的原型 SimpleFunction.prototype
• 第三层：obj.__proto__.__proto__，指向Object.prototype（因为所有函数的prototype默认都是普通Object实例，它的原型指向Object.prototype）
• 第四层：obj.__proto__.__proto__.__proto__，值为null，是原型链的终点

console.dir出现多余层级的原因 #

核心是两个点：

1. __proto__和[[Prototype]]的区别：[[Prototype]]是JS引擎内部存储对象原型的隐式插槽，每个对象只有一个，是真实的原型指向；而__proto__只是定义在Object.prototype上的访问器属性（getter/setter），用于暴露[[Prototype]]插槽的值。
2. 旧版本浏览器开发者工具的显示问题：早期部分Chromium内核浏览器的console.dir在展开Object.prototype下的__proto__属性时，会出现重复渲染的bug，把上层的原型结构反复嵌套显示，你看到的重复的constructor、hasOwnProperty等方法的层级，本质都是同一个Object.prototype的重复渲染，不是真实存在的新原型对象。

验证方法 #

你可以执行以下代码确认原型链确实只有三层：

function SimpleFunction(){}
let obj = new SimpleFunction();

// 验证各层原型的指向符合预期
console.log(obj.__proto__ === SimpleFunction.prototype); // true
console.log(obj.__proto__.__proto__ === Object.prototype); // true
console.log(obj.__proto__.__proto__.__proto__ === null); // true

// 直接验证Object.prototype的原型确实是null，不存在更多层级
console.log(Object.prototype.__proto__ === null); // true

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