How does JavaScript's prototypal Inheritance work?

Question

I want to know how JavaScript's Prototypal inheritance works.When we are creating an object with the new keyword the object's __proto__ is set to Constructor_Function.prototype .

But I don't understand why I am getting this Output.

My code :

function SimpleFunction(){}

let obj = new SimpleFunction();

console.dir(obj);

Output :

SimpleFunction {}
    [[Prototype]]: Object
        constructor: ƒ SimpleFunction()
        [[Prototype]]: Object
            constructor: ƒ Object()
            hasOwnProperty: ƒ hasOwnProperty()
            isPrototypeOf: ƒ isPrototypeOf()
            propertyIsEnumerable: ƒ propertyIsEnumerable()
            toLocaleString: ƒ toLocaleString()
            toString: ƒ toString()
            valueOf: ƒ valueOf()
            __defineGetter__: ƒ __defineGetter__()
            __defineSetter__: ƒ __defineSetter__()
            __lookupGetter__: ƒ __lookupGetter__()
            __lookupSetter__: ƒ __lookupSetter__()
            __proto__: Object
                constructor: ƒ SimpleFunction()
                [[Prototype]]: Object
                constructor: ƒ Object()
                hasOwnProperty: ƒ hasOwnProperty()
                isPrototypeOf: ƒ isPrototypeOf()
                propertyIsEnumerable: ƒ propertyIsEnumerable()
                toLocaleString: ƒ toLocaleString()
                toString: ƒ toString()
                valueOf: ƒ valueOf()
                __defineGetter__: ƒ __defineGetter__()
                __defineSetter__: ƒ __defineSetter__()
                __lookupGetter__: ƒ __lookupGetter__()
                __lookupSetter__: ƒ __lookupSetter__()
                __proto__: Object
                    constructor: ƒ Object()
                    hasOwnProperty: ƒ hasOwnProperty()
                    isPrototypeOf: ƒ isPrototypeOf()
                    propertyIsEnumerable: ƒ propertyIsEnumerable()
                    toLocaleString: ƒ toLocaleString()
                    toString: ƒ toString()
                    valueOf: ƒ valueOf()
                    __defineGetter__: ƒ __defineGetter__()
                    __defineSetter__: ƒ __defineSetter__()
                    __lookupGetter__: ƒ __lookupGetter__()
                    __lookupSetter__: ƒ __lookupSetter__()
                    __proto__: null
                    get __proto__: ƒ __proto__()
                    set __proto__: ƒ __proto__()
                get __proto__: ƒ __proto__()
                set __proto__: ƒ __proto__()
            get __proto__: ƒ __proto__()
            set __proto__: ƒ __proto__()

And When I tried this :

obj.__proto__.__proto__.__proto__;

I got :

null

So I don't understand why there is more than three prototype objects in the Output.

Answer 1

So I don't understand why there is more than three prototype objects in the Output.

It's because the SimpleFunction() constructor function is the derivative source object ( functions are objects with prototypes too ). Since SimpleFunction() is user defined, it must inherit from the Object object just like every other object does. Therefore you have the function object and its prototype the Object object, and then you have obj that is derived from the constructor with it's own Object object prototype.

Reference

If interested, here is the spec that describes this process

And no, [[Prototype]] and __proto__ are not the same thing. If you look at the log, you will see setter and getters named __proto__ . So __proto__ is actually an accessor property for [[Prototype]] while [[Prototype]] reflects the actual object that is the prototype.

Reference