JavaScript中__proto__与[[Prototype]]的区别及控制台显示差异问询

Hey there! Let's unpack your questions about JavaScript's prototype system—this stuff is notoriously confusing at first, so you're not alone.

1. The Actual Difference Between proto and [[Prototype]] #

Let's start with the core distinction:

• [[Prototype]]: This is the official term from the ECMAScript (JS) specification. It's an internal slot—a hidden, built-in link that every object (except those created with Object.create(null)) has, pointing to another object (its "prototype"). You can't directly access this slot using dot notation; instead, you use the standard methods Object.getPrototypeOf(obj) to read it, or Object.setPrototypeOf(obj, newProto) to modify it.
• proto: This is a legacy accessor property (a getter/setter) that was originally implemented by browser vendors before being standardized in ES6. Its sole purpose is to provide a shortcut to read and write the [[Prototype]] internal slot. While it works, it's generally not recommended for production code:
  • It's a visible property on objects, which means it can be accidentally overwritten or enumerated in some cases.
  • Using the standard Object.getPrototypeOf/Object.setPrototypeOf methods is more explicit and performant.

In short: proto is just a user-facing "window" into the underlying [[Prototype]] internal link.

2. Why Console Displays Differ ([[Prototype]] vs vs proto) #

The variation you're seeing is purely a difference in how browser developer tools choose to visualize the same internal link:

• Chrome: Uses [[Prototype]] in its console to explicitly denote that this is the internal slot defined by the spec.
• Firefox: Uses <prototype> as its own UI label for the same internal link.
• Older tutorials showing proto: Those likely used older versions of browser dev tools, which used the proto property name in their display (since that was the most recognizable term at the time).

No matter the label, they all refer to the same thing: the object's prototype internal link. For your test code:

function User(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
const user = new User("Someone", "Something");
console.log(user);

Whether Chrome shows [[Prototype]]: User or Firefox shows <prototype>: User, both are pointing to User.prototype—the prototype object associated with the User constructor.

3. What "Internal Link" Actually Means #

The [[Prototype]] internal link is the backbone of JavaScript's prototype inheritance system. Here's a concrete breakdown:

• It's a hidden connection between an object and its prototype. This link isn't an "own property" of the object—you won't see it if you run Object.keys(user) or loop over the object with for...in (unless you explicitly set it to enumerable, which is not recommended).
• When you try to access a property on an object (e.g., user.fullName), if the object itself doesn't have that property, the JavaScript engine will follow the [[Prototype]] link to the prototype object and check there. If it's not found there, it follows that prototype's [[Prototype]], and so on, until it reaches the end of the chain (which is null).
• This chain is how inheritance works in JS: objects inherit properties and methods from their prototype, and prototypes can inherit from other prototypes, creating a chain that ends at Object.prototype (for most objects).

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