JavaScript in-depth __proto__ and prototype differences and connections

There was a loaded colleague who wrote a piece of code

function a(){}a.__proto__.__proto__.__proto__

Then ask me, this thing a.__proto__.__proto__.__proto__ What, and then I look at the face, prototype also know a little, this __proto__ , Three more, what a ghost. So I have been unable to put down this problem, although I am very lazy, very do not like to pay the brains, but this is still difficult to pass, the last two days to study the majority of days, there is this article.
I say the answer first, the value above is null. I'm also responsible for telling you that the following _a.__proto__.__proto__.__proto__ is also null

function a(){}var _a = new a();_a.__proto__.__proto__.__proto__

First, a very classic picture, really is very classic, you understand him, you understand the whole world, and then the whole world is waiting for you to save the whole world.
)

Before the text, __proto__ and prototype

who has problems?

typeof = = = Object has __proto__ , null and undefined are not
typeof = = = function with __proto__ and prototype

What is __proto__?
__proto__The general situation is pointing to the prototype of the constructor of the object, in general, because there are still two cases.
Let's look at a simple example, the output below is true

< Span class= "Hljs-keyword" >function < Span class= "Hljs-title" >a ({} var _a = new a () console. Log (_a.__proto__ === a. Prototype)                

Well, what do you think I'm _a.__proto__.__proto__ going to say?
According to the above _a.__proto__ === a.prototype , then _a.__proto__.__proto__ a.prototype.__proto__ the equivalent, then we will push to equal a.prototype.constructor.prototype , then you go to a ratio, the result is false.

_a.__proto__.__proto__  === a.prototype.constructor.prototype // false

Several rules
Let's take a look first, we need to know or remember these rules first.

2. Object.prototype.__proto__ === null
   Don't tangle, iron law

4. object.__proto__ = = = Function.prototype
   Object,number, error, and so on, these functions are created by function, and the following is a description of
   These constructor is the function, here is more interesting is function.constructor is also function.
   that will have object.__proto__ = = = Function.prototype = = = function.__proto__

   Object . constructor. prototype === function. Prototype //true Function. constructor === function//true            

6. Function.prototype.__proto__ === Object.prototype
   So this is the design,

   Function.prototype.constructor === Object // false

   Go to the Chase

   There are a few basic things that we can deduce.

First look at the following code,
JS we're going to push toaaa.__proto__.__proto__.__proto__

function aaa(){} var _aaa = new aaa()

1. aaa.__proto__
   The AAA constructor is a function
   aaa.constructor === Function
aaa.__proto__ === Function.prototype

2. aaa.__proto__.__proto__
aaa.__proto__.__proto__ === Function.prototype.__proto__
   BasisFunction.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype

3. aaa.__proto__.__proto__.__proto__
aaa.__proto__.__proto__.__proto__ === Object.prototype.__proto__
   BasisObject.prototype.__proto__ === null
aaa.__proto__.__proto__.__proto__ === null

Or the above code, we then deduce_aaa.__proto__.__proto__.__proto__

1. _aaa.__proto__
   The _aaa constructor is AAA
   _aaa.constructor === aaa
_aaa.__proto__ === _aaa.constructor.prototype
_aaa.__proto__ === aaa.prototype

2. _aaa.__proto__.__proto__
_aaa.__proto__.__proto__ === aaa.prototype.__proto__
   Reference graph,Foo.prototype.__proto__ === Object.prototype
_aaa.__proto__.__proto__ === aaa.prototype.__proto__ === Object.protype

3. _aaa.__proto__.__proto__.__proto__
_aaa.__proto__.__proto__.__proto__ === Object.protype.__proto__
   BasisObject.prototype.__proto__ === null
_aaa.__proto__.__proto__ === null

Text extension, plus inheritance relationship

Let's take a look at the inheritance relationship.

function < Span class= "Hljs-title" >aaa ({} function Span class= "at" >bbb () {}bbb. Prototype = new AAA () var _bbb = new bbb () ;         

bbb.__proto__.__proto__.__proto__ === null
This is nothing to say,
Key to seebbb.prototype.__proto__.__proto__.__proto__

1. bbb.prototype.__proto__
bbb.prototype.__proto__ === bbb.prototype.constructor.prototype
   Bbb.prototype's prototype is an instance of AAA, and the BBB prototype's constructor is AAA, so
   bbb.prototype.__proto__ === aaa.prototype

2. bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ === aaa.prototype.__proto__
   Reference graph,Foo.prototype.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__ === Object.prototype

3. bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ .__proto__=== Object.prototype.__proto__ === null

Look again._bbb.__proto__.__proto__.__proto__ .__proto__

1. _bbb.__proto__
_bbb.__proto__ === bbb.prototype
2. _BBB. Proto. Proto
   _bbb.__proto__.__proto__ === bbb.prototype._proto__ === bbb.prototype.constructor.prototype === aaa.prototype
3. _BBB. Proto. Proto. Proto
   _bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__
   Reference diagramFoo.prototype.__proto__ === Object.prototype
_bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__ === Object.prototype
4. _bbb.__proto__.__proto__.__proto__.__proto__
_bbb.__proto__.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null

Text Plus Amount

Look at the following code

function Aaa(){}var _aaa=NewAAA ()function Bbb(){}Bbb.Prototype=new aaa () ;var _bbb = new bbb () ;function < Span class= "hljs-function" >ccc ({}ccc. Prototype = new BBB () var _ccc = new CCC ()           

We'll analyze _CCC's prototype and __proto__ , you'll say, you're done.
, then I will not analyze, I come to infer:

Infer:

2. Any custom function itself, three times __proto__ must be null, that is, to find three generations
   including Function,object, error, and so on
   Fucntion. Proto   View, according to
   object.__proto__ = = = Function.prototype = = function.__proto__
   Let's deduce function.__proto__.__proto__. __proto__
   First step: function.__proto__ = = = Function.prototype
   Step two: function.__proto__.__proto__ = = = function.prototype.__proto__ = = = Object.protetype
   Step three: function.__proto__.__proto__. __proto__ = = = object.protetype.__proto__ = = = NULL
   is a function-constructed
   Let's test the CCC

   ccc. __proto__. __proto__. __proto__ === null //true           

4. The function fn of the inheritance relationship, assuming that the number of inheritance is N,
   _fn = new fn ();
   So   _fn.__protot__[3 + N] = = = NULL
   _CCC should be 3+2 5 times

   _ccc. __proto__. __proto__. __proto__. __proto__. __proto__ === null //true           

6. The function fn of the inheritance relationship, assuming that the number of inheritance is n
   Pushed tofn.prototype.__proto__[3+n-1]
   CCC should be 4 times__proto__

   ccc.prototype.__proto__.__proto__.__proto__.__proto__ === null // true

   Of course, the relationship between the above, you slowly look at it

Outside the body, class

The following code also follows the rules, and as for why, ask yourself.

Class aaa {} class bbb extends aaa< Span class= "OP" >{}class  CCC extends bbb{};var _ccc = new CCC ()                

About Number,boolen, string,function, Date, Array, RegExp, etc. __proto_ _ 和 prototype. Proto'

1. __proto__
   Because these are functions created by function, the __proto__ function is the prototype of the constructor, so
   .__proto__ === .constrcutor.prototype === Function.prototype
2. .prototype.__proto__These old bones do not follow the __proto__ prototype of the constructor function.
   mentioned above, Function.prototype.__proto__ === Object.prototype
   By analogy, these built-in old bones.prototype.__proto__ === Object.prototype

# # Summary
To summarize, especially in need of memory:

2. Object.prototype.__proto__ === null
4. Function.prototype.__proto__ === Object.prototype
   Built-in Number,boolen, String,function, Date, Array, regexp, etc.
6. Object.__proto__ === Function.prototype === Function.__proto__
   Contact 2, these things are created by function
8. Math, JSON的__ptoto__是 Object.prototype
   typeof can see that these two are object, not function.
10. function A () {} is created so that there are no inheritance relationships
    a.prototype.__proto__ === Object.prototype
12. A function with inheritance to see the above inference
14. Object literal and new object () For example, Var a ={}, B = new Object (), c = [];
    a.__proto__ === a.constructor.prototype === Object.protype
a.__proto__.__proto__ === Object.protype.__proto__ === null
16. The basic data type String,number,boolean, such as var a = ", b=10, c= false,
    b.__proto__ === b.constructor.prototype === Number.prototype
b.__proto__.__proto__ === Number.prototype.__proto__ === Object.prototype
b.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null
18. null and undefined no __proto__

Eventually

1. Look at the picture
2. Browser input xx.__proto__ or xx.prototype see for yourself.

JavaScript in-depth __proto__ and prototype differences and connections