Javascript Object Layout

Next we will talk about the hierarchy of objects in JavaScript.




Source: www.mollypages.org/misc/js.mp
')
Next come excerpts from the text and they can be "muddy", so I immediately suggest not to swear, but it is better to just study the diagram, for the sake of it and the article is published. Those. it is possible not to read further, but if you still read and see the obvious discrepancies and can argue them, then welcome to the discussion in the comments ...

So the translation:
- All instances are inherited from the prototype of the function object that created them.

- Mozilla / Konqueror has a built-in __proto__ property that points to the prototype of the creator function object.

- Regardless of the presence / absence of the __proto__ property, the basic idea is that all objects use the prototype of the object pointed to by the creator function. The default object prototype has a constructor property that points back to the prototype creator function.

- The prototype can only be used for inherited properties of a function. The function itself does not use the associated prototype!

function foo () {}; var f1 = new foo ();
foo.prototype.x = "hello";
console.log (f1.x); // hello
console.log (foo.x); // undefined

- The default object prototype can be replaced by any other object created by the user. The constructor property must be manually replaced by another:

function foo () {}; var f1 = new foo ();
console.log ('source>', f1.constructor, foo.prototype.constructor, foo, f1.constructor === foo, foo.prototype.constructor === foo);

foo.prototype.constructor = Object;
console.log ('prototype replacement>', f1.constructor, foo.prototype.constructor, Object, f1.constructor === Object, foo.prototype.constructor === Object);

foo.prototype.constructor = foo
console.log ('back>', f1.constructor, foo.prototype.constructor, foo, f1.constructor === foo, foo.prototype.constructor === foo);

- all objects automatically read the properties of the prototypes along the chain from their own to the parent.

function foo () {}; f1 = new foo (); f2 = new foo ();
foo.prototype.x = "hello";

console.log (f1.x); // "hello"
console.log (f2.x); // "hello"

f1.x = “goodbye”; // setting f1.x "overlaps" foo.prototype.x Only for f1

console.log (f1.x); // "goodbye"
console.log (f2.x); // "hello"
delete f1.x // delete local property
console.log (f1.x) // "hello" ... foo.prototype.x back "visible" for f1

// Setting the property directly to the prototype changes the value in all instances.

foo.prototype.x = “goodbye”;
console.log (f1.x); // "goodbye"
console.log (f2.x); // "goodbye";

In the diagram below you can see that:

- Function .__ proto__ points to Function.prototype. Accordingly: Function.constructor === Function The function constructor is a function.

- Object instanceof Object == true. based on the fact that Object .__ proto __.__ proto __. constructor == Object

But, foo instanceof foo == false. Because Foo does not exist as a constructor in its own prototype chain.