Why prototype is not available in simple JavaScript object [duplicate]

Question

I am trying to understand the JavaScript prototype and I am bit confused.There are tons of tutorials out there and each has different explanation on it. So I don't know where to start with.

So far I have created a simple JavaScript object

var a = {flag : 1}

In MDN, I read that

All objects in JavaScript are descended from Object

But I couldn't find the prototype for this object a a.prototype gives me undefined

Then I found the prototype is available in a.constructor.prototype. When I create a function var myfunc = function() {} and then myfunc.prototype is available. So the prototype property is directly available on functions and not on objects.

Please help me to understand this and what is that a.constructor.

Any help is greatly appreciated.

Answer 1

Every function can be called as a constructor (with new keyword).

function Dog() {
  this.legs = 4;
}

When you call it as a normal function, var dog = Dog(), it will define window.legs in browsers to be 4 (something a bit different but related if in Node.JS), and set dog to undefined.

However, if you call it as a constructor, as var dog = new Dog(), it will make a new object, and set its constructor to this function, and assign this new object to dog. It will set its internal prototype (which can be accessed in some browsers as dog.__proto__) to the constructor's prototype (Dog.prototype). Or, in pseudocode,

var dog = {
  legs: 4
};
dog.constructor = Dog;
dog.__proto__ = Dog.prototype; // same as dog.constructor.prototype

Thus, dog.constructor.prototype is not, strictly speaking, the prototype of dog, it is the object that will get assigned to the prototype when the constructor function is run. And in particular, Dog.prototype is not prototype of the Dog function (just the prototype that its instances will acquire). The reason prototype is not available on non-functions is because non-functions can't be used as constructors, so it makes no sense to have it (since its only function is to be copied to constructed instance objects' __proto__).

The object in your example still has a prototype, but not directly accessible; you can either go the hacky route in the browsers that allow it (a.__proto__), or ask the browser nicely (Object.getPrototypeOf(a)).

Answer 2

You can use Object.getPrototypeOf() instead to return you the prototype of Object.

To see this in your browser devtools, run the following:

var a = {flag: 1};
console.dir(Object.getPrototypeOf(a));