How does the prototype chain really work?

Question

If I have the following constructor function;

function Person(age) 

{
this.age = age;
this.talk = function() {
return “talking”;
};
}

And I create an object.

me = new Person();

now this is where it gets confusing. The prototype object inside “Object” (the base Object, I will refer it with a capital O) should be empty, as in, null. But it isn’t.

The “me” object inherits from the “person” constructor function and the “person” constructor function inherit from the “Object” constructor function, but the prototype inside the “Object” constructor function should be pointing to Null.

Instead if I click on it. It shows that that the prototype inside Object function again inherits from Person (doesn’t make sense) and then the Prototype Object inside that inherits from “Object” again and the one inside that again inherits from “Object” and the prototype object inside it, is the one that has null.

So how is this really working? What am I missing? Why is it pointing back and forth?

Answer 1

The browser console lets you view an object's prototype under [[Prototype]] because that's the syntax used in the ECMAScript specification to refer to internal data of objects not accessible as properties.

Historically, browsers started exposing this internal value under the nonstandard property __proto__. Now that Object.getPrototypeOf and Object.setPrototypeOf have been added to the language, __proto__ is considered obsolete and should not be used.

The prototype chain indeed follows your expectations:

Object.getPrototypeOf(me) === Person.prototype; // true
Object.getPrototypeOf(Person.prototype) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype) === null; // true

What's got you confused is that __proto__ is an accessor property defined on Object.prototype. Accessor properties implicitly call getter/setter functions, and these functions can compute their result based on the object they are applied to.

If __proto__ didn't exist in browsers, we could implement it with the following code:

Object.defineProperty(Object.prototype, "__proto__", {
    configurable: true,
    enumerable: false,
    get() { return Object.getPrototypeOf(this); },
    set(value) { Object.setPrototypeOf(this, value); },
});

When you type me.__proto__, the JS engine goes up the prototype chain until it finds the __proto__ getter function defined on Object.prototype, but it then implicitly calls that function with me as its this argument, therefore returning the protoptye of me.

When you go in the browser's console and unfold me, then [[Prototype]], then [[Prototype]] where you can find __proto__, you are manually doing what the JS engine does to lookup properties in the prototype chain. What's a bit counterintuitive is that the value shown inside __proto__ will be me's prototype, despite being displayed deeper in the tree. That's because the this argument doesn't change as you unfold [[Prototype]] entries in the debugger.