浏览器控制台无法查看__proto__属性的原因及与[[Prototype]]的关系

首先你提供的示例代码存在语法错误，修正后的可运行版本如下：

// 原代码缺少构造函数形参定义，会抛出未定义报错
function Vehicle(brand) {
  this.brand = brand
}

const vehicle = new Vehicle("Ford")
console.log(vehicle.__proto__ === Vehicle.prototype) // 输出true

控制台打印vehicle看不到__proto__属性的原因 #

• __proto__不是vehicle实例的自有属性，它是挂载在Object.prototype上的非枚举存取器属性（getter/setter），默认不会出现在对象的自有属性枚举结果中。
• 现代浏览器控制台默认只展示对象的自有可枚举属性，继承的非枚举属性会被折叠到单独的原型分区中：比如Chrome控制台会将内部原型标识为[[Prototype]]，需要手动点击展开才能查看对应的内容，不会直接在实例的一级属性中展示__proto__。

__proto__与[[Prototype]]的关系 #

二者指向同一个原型对象，但属性定位完全不同：

• [[Prototype]]是ECMAScript规范中定义的对象内部私有属性，仅供给JS引擎内部访问，开发者无法在代码中直接读写这个属性，它的作用就是存储对象的原型引用。
• __proto__是早期浏览器厂商为了方便开发者操作原型自行实现的非规范属性，后续被ES6纳入了规范的附录B（属于仅为兼容旧环境保留的legacy特性，不推荐生产环境使用）。它本质是一套存取器，对__proto__进行读写操作时，实际操作的就是对象内部的[[Prototype]]，可以理解为__proto__是[[Prototype]]的对外非标准访问入口。
• 生产环境操作原型推荐使用标准API：Object.getPrototypeOf()读取对象原型，Object.setPrototypeOf()设置对象原型。

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