Understanding the prototype chain in JS, the relationship between prototype and __proto__

Speaking of prototype, we have to say the new process first.

Let's look at this piece of code first:

    <script type= "Text/javascript" >    varfunction  () {};     var New Person ();     </script>

A very simple piece of code, let's see what this new has done? We can split the new process into the following three steps:

<1> var p={}; In other words, initialize an object p.

<2> P.__proto__=person.prototype;

<3> Person.call (P); that is, construct p, which can also be called initialization p.

The key is the second step, and let's prove it:

    <script type= "Text/javascript" >    varfunction  () {};     var New Person ();     = = = Person.prototype    ); </script>

This piece of code returns TRUE. Explain the correctness of step 2.

So what is __proto__? Let's simply say here. Each object initializes a property inside it, that is, __proto__, when we access the property of an object, if the object does not exist inside this property, then he will go to __proto__ to find this attribute, this __proto__ will have their own __proto__, So we have been looking for the concept of the prototype chain we usually call.

According to the standard, __proto__ is not public, that is, a private property, but the engine of Firefox exposes him to become a common attribute, we can access and set up externally.

Well, the concept is clear, let's take a look at the following code:

    <script type= "Text/javascript" >    varfunction  () {};     function () {    alert ("person say");    }     var New Person ();    P.say ();     </script>

This code is very simple, I believe everyone has written this, so let's see why p can access the person's say.

First, var p=new person (); P.__proto__=person.prototype can be obtained. So when we call P. Say (), first there is no Say this attribute in P, so, he needs to go to his __proto__ to find, that is, person.prototype, and we define the above person.prototype.say=function () {}; So, we found this method.

OK, next, let's look at a more complicated one.

<script type= "Text/javascript" >varperson =function () { }; Person.prototype.Say=function() {alert ("Person say"); } Person.prototype.Salary= 50000; varProgrammer =function () { }; Programmer.prototype=NewPerson (); Programmer.prototype.WriteCode=function() {alert ("Programmer writes Code");      }; Programmer.prototype.Salary= 500; varp =NewProgrammer ();    P.say ();    P.writecode ();    alert (p.salary); </script>

Let's do this derivation:

var p=new Programmer () can be obtained p.__proto__=programmer.prototype;

And on top we specify programmer.prototype=new person (); Let's split this up, Var p1=new person (); PROGRAMMER.PROTOTYPE=P1; then:

P1.__proto__=person.prototype;

Programmer.prototype.__proto__=person.prototype;

Get P.__proto__=programmer.prototype on top of the above. Can get p.__proto__.__proto__=person.prototype.

Well, after figuring it out, let's look at the results above, P.say (). Because P does not say this property, so go to p.__proto__, that is, Programmer.prototype, that is, p1 to find, because there is no P1 say, then go to p.__proto__.__proto__, that is Person.prototype to find, so found the alert ("Person say") method.

The rest is the same.

This is how the prototype chain is implemented.

Finally, in fact, prototype is only an illusion, he in the implementation of the prototype chain is only an auxiliary role, in other words, he is only in new time has a certain value, and the essence of the prototype chain is actually __proto__!

Understanding the prototype chain in JS, the relationship between prototype and __proto__