Understanding prototype, __proto__, constructor and their chains in pictures

There is a javascript code:

1. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
2. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
3. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
4. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
5. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
6. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
7. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
8. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
9. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
10. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
11. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
12. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;

Question. What will expressions 1-4 return and why?

Difficult to answer?
Then you should go under the cat ;-) (Next 600 KB large images)


So, I think many people interested in this topic have read manuals and smart books on javascript, and more than once, but the basis of pseudo-OO (ie Prototype-based) parts of the language cannot be deposited in my head. In this article you will not find the dry facts and manuals, after reading the review will be all simple and clear.
')
What kind of schemes?
On the right in the diagram is the current executed code, on the left is the state of the objects. Black arrows - links to the object. Signatures over arrows - property name by reference. Gray arrows - their own implicit properties - links to the properties of the prototype. Global javascript objects are marked in red. Blue variables. Green local objects. All console.log returns true.

All images are clickable

You can not browse, and download the source (png + bmml): http://narod.ru/disk/400270001/javascript_prototype.zip.html

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Sources (png + bmml): http://narod.ru/disk/400270001/javascript_prototype.zip.html
Source code: pastebin.com/wBchEpxq

I hope my article was useful for you, and the diagrams are clear :)

PS The __proto__ property is obsolete since JavaScript 1.8.1. Object.getPrototypeOf (object) should be used instead, however, Crocford asks crash not to use getPrototypeOf if “if you’re doing everything right, you don’t need it”