About JS's prototype chain, __proto__,prototype's understanding

First of all, the reference blog, thank

Http://blog.sina.com.cn/s/blog_6c62f4330102wq0u.html

http://blog.csdn.net/leadn/article/details/51781539

And so on, and there are some other links that don't stick here.

JS in about prototype article many, today himself write a bit of their own understanding

Do not like to come up on the sticky concept, because if the concept can understand, also do not need to write this article.

about the prototype chain, the main thing is prototype,__proto__ these two properties difficult to understand, today we will look at how to play these two properties

First on the code

: First Use js to customize an object while creating this object

Function Man () {   //define an object} var m = new Man ();//Create an Object

OK, so our raw materials are ready. Next, is not two attributes, we have to test it.If the code is not good for stitching strings, print directly

Console.log (m.__proto__)   //__proto__ property of the object
Console.log (M.prototype)   //prototype property of the object
Console.log ("========================")
Console.log (man.__proto__)//__proto__ property of the function
Console.log (Man.prototype)//prototype property of the function

Results

We'll just look at the results directly and intuitively.

1. Obvious m.prototype print for undefined

2.m.__proto__ and Man.prototype printing results are the same, you can manually prove (m.__proto__ = = Man.prototype return true)

3. There is also a man.__proto__ print thing good strange function (), it doesn't matter, for the time being he

It's time to get to the concept.

　　　 prototypeIs the property of the constructor, which refers to the prototype of the constructor , when the instance is generated, JS generates the object under the property as a parent class based on the prototype property of the constructor.This effect is only possible with the constructor function .~if a constructor does not specify this property, the__proto__The default point is to nativeObjectthe Prototype object,the property becomes an object, whereConstructorproperty to point to itself. (This sentence directly sticky, temporarily do not understand just look at me red on the line)   

__proto__ is object has properties , which can be called an implicit prototype, an implicit prototype of an object points to the prototype of the constructor that constructs the object , which also ensures that the instance has access to the properties and methods defined in the constructor prototype.

Start explaining

1. Why M.prototype print as undefined?

Nonsense,prototype is the property of the constructor, M is an object, nature does not have this property, so print undefined

2.m.__proto__ and man.prototype print the same result.

They are actually talking about an object, look at the blue word above, are pointing to the prototype, I use the same object, naturally equal AH

3. Don't explain, wait

So how do these two things work?

You see the concept again,prototype is the property of the constructor,__proto__ is the object has properties

In fact, as long as you distinguish between functions and objects, you can call the corresponding attributes to achieve the desired results.

　　

Don't tell me. Functions are objects, easy to confuse, functions are functions

That's all you need to know about this two.

1. Only functions can call the prototype property

2. The object can call __proto__, but cannot call the prototype property

Next, the prototype chain

In fact, as long as you understand the above two points, the prototype chain is much simpler

Begin

First review the above concept: look at the green word above (when generating an instance, JS will generate the object under the property as the parent class according to the prototype property of the constructor), simply speaking, the function's prototype attribute points to his father.

Then look at the literal meaning of prototype: prototype, what meaning, that is, the object at the beginning of creation, according to the prototype of the appearance of the creation (like Nu wa made people, according to their own appearance, can also be understood as a blueprint building)
, which means who the archetype is, and who he is.
So, how does the man.prototype above point to its own function object?
　　　　  No prototype function is like an orphan, no father, how to do it, oneself is his father (take care of themselves Bai), since can not grow like others, it is like his own good

Prototype chain, want to chain up must have a number of objects Ah, (actually all objects are from object, here fear cause misunderstanding, do not use object)
We'll declare an object people

function people () {      this.name = "Bullet"; }

Then let people become man's father (here is the implementation of JS inheritance, this inheritance code is not strong enough to own Baidu other inheritance, but this is a way of inheriting)

It's simple, not that the prototype attribute of the function points to his father, so I

　　

Man.prototype = new People (); You can only use man.prototype here, because the object is not prototype property, and this is followed by new because prototype is pointing to an object oh

Thus, when the man is constructed, he is not constructed according to man, but according to people. Construction, since the people is shining Construction, P eople some man it has to be. This implements the inheritance

　　　　

(Test inherited code)

        function people () {            this.name = "Bullet";        }                Function Man () {        }        Man.prototype = new People ();//Let man recognize people as father
        var m = new Man ();        Console.log (m.name);          This will inherit the Name property of the parent class, and it will print bullet    

Then, with inheritance, if the properties of a subclass are not customized, the properties of the parent class will be used (as if the Name property of the parent class can be read here) it makes sense, but how did man find the name property of people?

It's going to follow the prototype chain to find

We are looking for the name of M property, M itself is not name, how to do? Look for his father, but how does his father find it? We only set the Man.prototype = New People (), but I am an object, there is no prototype attribute, how to do?

What else can I do? I'm an object, I'm not prototype, but I have __proto__ properties.

m.__proto__ = = Man.prototype

and vice versa.

Man.prototype = Father Object
m.__proto__ = = Man.prototype
m.__proto__ = Father Object

Congratulations M object to find Dad successfully!!! So you can use Dad's attributes.

　　　Conclusion

So the subclass looks for the parent class like this.

First we implement inheritance based on prototype , but the subclass is looking for the parent class through the __proto__ property.

There is no way to subclass no prototype Ah, you can take me how?

child object . __proto__, so you find the parent class,

The original __proto__ attribute is the object used to find Dad's properties Ah!!!

　　　　　　

then, find the parent class is an object ah, can continue to __proto__ find Grandpa, consistent so look down

so object . __proto__.__proto__.__proto__.__proto__ .... It can always come to an end (null)

this. __proto__.__proto__.__proto__.__proto__ .... is made up of a prototype chain.

　　　　　　

At this time, some people will have doubts

function . Prototype.prototype. can you keep it up?

It 's not going to work, it's all about functions . . Prototype gets (or sets) an object, the object has no prototype property, So the point to the second layer is already dead (undefined)

　　　　　　

Console.log (Man.prototype.prototype);  It must be undefined  . Man.prototype points to an object that has no prototype property

It also explains the problem once again

1. Why M.prototype print as undefined?

Nonsense,prototype is the property of the constructor, M is an object, nature does not have this property, so print undefined

Both can be combined and we can

function . prototype.__proto__.__proto__.__proto__ .... is to be able to point to the end, and finally NULL

Finally, let's explain one last question.

3. Why man.__proto__ print something so strange that it is a function ()

First of all, he is not undifined, stating that the function has __proto__ this property, how to force explain a wave?

very simple, I apologize, I 'm sorry, because the function he is really an object, just let you distinguish is for good explanation, now you remember it (because everything is object, function is also object)

so man, this function is available to use __proto__ property of

　　　　　

and it says that __proto__ is the equivalent of looking for Dad's property,

we use man.__proto__ to return function () Description function () this is the function of the father, we can continue to . __proto__, to find Object , indicating fanction is also Object a subclass of

        Console.log (man.__proto__);           Find Dad function ()        console.log (man.__proto__.__proto__);//Find Grandpa object{}

Explanation One:

Why not find people here, because this is a man function object, the function is constructed through function (), the above inheritance is to the object (that is, m) in terms of,

So the man function of the Father is function, and the New Man () object of the father is people, do not confuse the difference between the object and the function is good (although I know the function is also an object)

EXPLANATION Two:

This messy object relationship can often be seen on the internet.

　　　　　　

You look at the original picture, I will draw you another (although very ugly)

　　

　　

Use object this superclass to find the parent class will return Null (the legendary out of nothing), can be self-Baidu, the reference link above refers to the reason for returning NULL

　　　　　　

　　　　Final summary

Object looking for Dad with __proto__ attribute to find, this everyone has, everything objects

function because can be constructed, so can use prototype to find him according to who constructs, but can only find a layer, because the function is based on the object Construction, continue to find can only use __proto__ the

So, an object . __proto__ = = The function of this object . Prototype

Adult speech is object his father = = object that constructs this object

Remember that if you distinguish between objects and functions two things, using __proto__ and prototype will not be any more difficult.

The first time to write a blog, you can spray Ah, promote progress, hahaha

 

About JS's prototype chain, __proto__,prototype's understanding