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.

Does this answer your question? [Benefits of prototypal inheritance over classical?](https://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical) — Randy Casburn, Nov 10 '21 at 14:16
Maybe have a read about [JavaScript Object prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)? They make it possible to patch code of objects you inherit from. If you just ask yourself *"why is this self-referencial 3 times?"* stop yourself and understand it in broad strokes. There are three prototype objects because the language doesn't lie to you. It's just how many there are for a function. Why is this a problem in your case? — Peter Krebs, Nov 10 '21 at 14:37
It's not a problem,like I said it's just I can't Understand why I am getting this ouptut.Are `[[Prototype]]` and `__proto__` the same thing? — Pradeep S, Nov 10 '21 at 14:50

score 0 · Answer 1 · answered Nov 10 '21 at 15:43

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

How does JavaScript's prototypal Inheritance work?

1 Answers1