Why does prototype's constructor refer back to itself?

Question

From Mozilla-javascript-docs

"Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain."

First question - I hope by "each object contains the prototype", the author meant "each function object" contains the public prototype property, because an object like this var myObj = {} doesn't have any public prototype.

Please see the concole screenshot below - notice how public prototype property(and not the private __proto__) doesn't exist for an object created with {} -

Second question - After reading the above-mentioned literature when I checked the prototype chain of a simple function, at first it seemed to be going infinitely deep - but then I realized that the constructor of the prototype is actually referring back to itself. Unlike how it is mentioned in Mozilla's documentation - the prototype chain here seems to be not getting ended with null as the root.

I imagine this was designed to support the prototype based inheritance. But I would appreciate if it could be explained, exactly how this self-reference in the prototype's constructor helps in achieving that?

Answer 1

If you want to look up the prototype chain described there:

Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

You should look at the __proto__ properties (which will point to the internal prototype of the object being examined).

Here, you see that the internal prototype of myFunctionObj is Function.prototype, and going up the next level of __proto__ takes you to Object.prototype, which has no __proto__ (the end of the prototype chain).

The prototype property of myFunctionObj refers to the internal prototype of instantiated objects (like const obj = new myFunctionObj();, and then obj.__proto__ === myFunctionObj.prototype), not to the internal prototype of the myFunctionObj itself.

Only functions have a .prototype property, usually, and their .prototype will refer to the internal prototype of instances created with new. Plain objects don't have a .prototype property (because plain objects can't be called to instantiate something), but you can still access the internal prototype of a plain object (or of anything) using Object.getPrototypeOf (or .__proto__):

const obj = {};
console.log(
  obj.__proto__ === Object.prototype,
  Object.getPrototypeOf(obj) === Object.prototype,
);

A function's .prototype.constructor is indeed just a self-reference back to the function.

function foo(){};
console.log(
  foo.prototype.constructor === foo
);

It's not very useful when you already have a reference to the constructor, but it is useful when you have a reference to an instance, but don't know its constructor - with prototypal inheritence, accessing the instance's .constructor property will give you the function used to construct it:

const bar = (() => {
  function Bar(){}
  const bar = new Bar();
  return bar;
})();

// now Bar is out of scope
// but you can still reference it because you have an instance:
const Bar = bar.constructor;
console.log(Bar);