Chrome控制台中[[Prototype]]与__proto__显示位置差异的疑问

首先明确核心关系：__proto__是对象的访问器属性（getter/setter），它的唯一作用就是读取或设置对象内部的隐藏属性[[Prototype]]。所以你能调用newPerson.__proto__，本质是通过这个访问器拿到了newPerson内部[[Prototype]]指向的对象，和控制台里显示的[[Prototype]]是同一个东西，只是访问方式不同。

你的代码对应的原型链逻辑 #

先理清楚实际的原型链结构：

function Person(name) {
  this.name = name;
}
var newPerson = new Person("John");

• newPerson的[[Prototype]]指向Person.prototype（构造函数的原型对象）
• Person.prototype的[[Prototype]]指向Object.prototype（所有普通对象的顶层原型）
• Object.prototype的[[Prototype]]指向null，原型链到此结束

对应调用验证：

newPerson.__proto__ === Person.prototype; // true
newPerson.__proto__.__proto__ === Object.prototype; // true
newPerson.__proto__.__proto__.__proto__ === null; // true

为什么控制台的展示路径看起来更复杂？ #

Chrome控制台的展示逻辑是为了区分对象自身属性和继承属性：

1. 当你展开newPerson时，看到的[[Prototype]]是直接显示它的内部原型指向（即Person.prototype），这是对象的内部特性，不会作为自身属性显示。
2. 当你展开Person.prototype时，控制台会显示它继承来的__proto__属性（这个__proto__是定义在Object.prototype上的，所有普通对象都能继承到）。此时你点击这个__proto__，其实是在访问Person.prototype.__proto__，也就是Object.prototype。
3. 接着展开Object.prototype，它自身也继承了__proto__访问器，这个访问器的getter返回null，同时控制台也会显示它的[[Prototype]]为null。

所以你看到的多层点击路径，只是控制台把继承来的__proto__属性和内部的[[Prototype]]特性同时展示出来导致的视觉复杂，但实际原型链的逻辑还是三层到null，和你用__proto__链式调用的结果完全一致。

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