I've been trying to wrap my head around this recently and finally came up with this "map" that I think sheds full light over the matter
http://i.stack.imgur.com/KFzI3.png
I know I'm not the first one making this up but it was more interesting figuring it out that finding it :-). Anyway, after that I found e.g. this another diagram that I think says basicly the same:
Javascript object layout
The most surprising thing for me was discovering that Object.__proto__
points to Function.prototype
, instead of Object.prototype
, but I'm sure there's a good reason for that :-)
I paste the code mentioned in the image here as well for if anyone wants to test it. Note that some properties are added to the objects for making easy to know where we are after some jumps:
Object.O1='';
Object.prototype.Op1='';
Function.F1 = '';
Function.prototype.Fp1 = '';
Cat = function(){};
Cat.C1 = '';
Cat.prototype.Cp1 = '';
mycat = new Cat();
o = {};
// EDITED: using console.dir now instead of console.log
console.dir(mycat);
console.dir(o);
constructor
is a pre-defined [[DontEnum]] property of the object pointed to by the prototype
property of a function object and will initially point to the function object itself.
__proto__
is equivalent to the internal [[Prototype]] property of an object, ie its actual prototype.
When you create an object with the new
operator, its internal [[Prototype]] property will be set to the object pointed to by the constructor function's prototype
property.
This means that .constructor
will evaluate to .__proto__.constructor
, ie the constructor function used to create the object, and as we have learned, the protoype
property of this function was used to set the object's [[Prototype]].
It follows that .constructor.prototype.constructor
is identical to .constructor
(as long as these properties haven't been overwritten); see here for a more detailed explanation.
If __proto__
is available, you can walk the actual prototype chain of the object. There's no way to do this in plain ECMAScript3 because JavaScript wasn't designed for deep inheritance hierarchies.
The Prototypal Inheritance in JavaScript is based on __proto__
property in a sense that each object is inheriting the contents of the object referenced by its __proto__
property.
The prototype
property is special only for Function
objects and only when using new
operator to call a Function
as constructor. In this case, the created object's __proto__
will be set to constructor's Function.prototype
.
This means that adding to Function.prototype
will automatically reflect on all objects whose __proto__
is referencing the Function.prototype
.
Replacing constructor's Function.prototype
with another object will not update __proto__
property for any of the already existing objects.
Note that __proto__
property should not be accessed directly, Object.getPrototypeOf(object) should be used instead.
To answer the first question, I've created a bespoke diagram of __proto__
and prototype
references, unfortunately stackoverflow does not allow me to add the image with "less than 10 reputation". Maybe some other time.
[Edit]
The figure uses [[Prototype]]
instead of __proto__
because that is how ECMAScript specification refers to internal objects. I hope you can figure everything out.
Here are some hints to help you understand the figure:
red = JavaScript Function constructor and its prototype
violet = JavaScript Object constructor and its prototype
green = user-created objects
(first created using Object constructor or object literal {},
second using user-defined constructor function)
blue = user-defined function and its prototype
(when you create a function, two objects are created in memory:
the function and its prototype)
Note that constructor
property does not exist in created objects, but is inherited from the prototype.
Object
is Eve, and Function
is Adam, Adam (Function
) uses his bone (Function.prototype
) to create Eve (Object
). Then who created Adam (Function
)? -- The Inventor of the JavaScript language :-).
According to utsaina's answer, I want to add more useful info.
The most surprising thing for me was discovering that
Object.__proto__
points toFunction.prototype
, instead ofObject.prototype
, but I'm sure there's a good reason for that :-)
It should NOT be. Object.__proto__
should NOT point to Object.prototype
. Instead, the instance of Object
o
, o.__proto__
should point to Object.prototype
.
(Forgive me for using the terms class
and instance
in JavaScript, but you know it :-)
I think the class Object
itself is an instance of Function
, that's why Object.__proto__ === Function.prototype
. Therefore: Object
is Eve, and Function
is Adam, Adam (Function
) uses his bone (Function.prototype
) to create Eve (Object
).
Furthermore, even the class Function
itself is an instance of Function
itself, that is Function.__proto__ === Function.prototype
, that's also why Function === Function.constructor
Further furthermore, the regular class Cat
is an instance of Function
, that is Cat.__proto__ === Function.prototype
.
The reason for the above is, when we create a class in JavaScript, actually, we are just creating a function, which should be an instance of Function
. Object
and Function
are just special, but they are still classes, while Cat
is a regular class.
As a matter of factor, in Google Chrome JavaScript engine, the following 4:
Function.prototype
Function.__proto__
Object.__proto__
Cat.__proto__
They are all ===
(absolutely equal) to the other 3, and their value is function Empty() {}
> Function.prototype
function Empty() {}
> Function.__proto__
function Empty() {}
> Object.__proto__
function Empty() {}
> Cat.__proto__
function Empty() {}
> Function.prototype === Function.__proto__
true
> Function.__proto__ === Object.__proto__
true
> Object.__proto__ === Cat.__proto__
true
OK. Then who creates the special function Empty() {}
(Function.prototype
)? Think about it :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With