Why functions prototype is chained repeatedly?

Question

I'm very new to JavaScript. I'm reading from JavaScript good parts. It says :

Every function object is also created with a prototype property

So I did something like this :

function test() {
}

console.log(test.prototype);

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

I'm really confused with this output. Why does constructor's prototype property again nested with constructor? And why does this goes on like a chain? Where I'm missing the concept?

Thanks in advance.

Answer 1

The prototype property of a function holds the object from which all instances of that function will inherit when created with the new operator. And all these prototype objects (usually) have a constructor property which points back to the function - there you have the circular reference. So, as a new test() inherits that property, (new test).constructor === test evaluates to true.

You will need to distinguish between the prototype property of a function object and the prototype object from which an object inherits - often referenced as "the internal [[prototype]] property".

A constructor is a function, not to say a Function, and has both. Therefore it inherits from the Function.prototype object - where the constructor property says that all functions are constructed by the Function constructor. If your developers console would show the prototype of Function objects, you could see them. I think there is an option in the settings.

So, the famous "prototype chain" is not about the constructor and/or prototype properties, but about the prototype object from which that object inherits from:

 function test() {}              new test()
   (a Function)              (a test instance)
        ||                           ||
        ||                           ||
        \/                           \/
 Function.prototype            test.prototype
(a Function, by spec)           (an Object)
        ||                           ||
        ||                           ||
        \/                           \/
 Object.prototype             Object.prototype
        ||                           ||
        ||                           ||
        \/                           \/
       null                         null

Answer 2

Thats one of the very good books to pick up.

It covers more of javascript from programmers point of view covering all the object oriented techniques and most of the things in it aren't covered in any other books on javascript.

And about prototype. Every object in JavaScript holds a hidden piece of state – a reference to another object known as the object’s prototype. Prototype objects in JavaScript give us inheritance, and they allow us to share method implementations, too. Prototypes also chain. In other words, since a prototype object is just an object, then a prototype object can maintain a reference to another prototype object.

Prototype in Javascript is little complicated part as I have experienced while learning it.

This is a great reference to know how prototype in js works.