Why print object display prototype chain not as expected

function F () {
   this.a = 1;
   this.b = 2;
}
let o = new F(); // {a: 1, b: 2}

// add properties in F function's prototype
F.prototype.b = 3;
F.prototype.c = 4;
console.log(o)

Using Chrome's developer tools, I find the output as follows:

enter image description here

I'm really confused with this output. Who can explain the result.


Solution 1:

Disclaimer: I am not entirely sure about this answer.

__proto__ refers to the object that is being constructed (it's part of the constructor).

[[Prototype]] is the object that is meant to prototype the current object.

Solution 2:

[[Prototype]] refers to the internal prototype that every object is created with. It is not accessible, for example

o.prototype.b

returns undefined.

The deprecated __proto__ is initially uncalled, and, when it is called, fills up with the values of [[Prototype]], hence the duplication. So,

o.__proto__.b

returns 3.

The preferred access method is to use the getPrototypeOf() static method of Object.

Object.getPrototypeOf(o).b

returns 3.