Explain JS prototype and prototype chain in detail

​

  Catalog

1. Constructor prototype prototype

2. Object prototype __proto__

3.constructor Constructors

4. Prototype chain

5. In prototype object this Point to

6. Extend built-in objects （ Application of prototype object ）

---

stay ES6 Before , We are object-oriented through constructors . We put the public properties and methods of the object in the constructor

like this ：

But the constructor method is easy to use , But he has the problem of wasting memory . For example, in the above example, we have a function in the constructor , Functions are complex data types , He will open up a space in memory alone . Here we create two instantiated objects , Then it will open up two memory spaces to store the same function , That causes the problem of memory waste .

1. Constructor prototype prototype

The function allocated by the constructor through the prototype is required by all objects Shared .
JavaScript Regulations , Each constructor has one prototype attribute , Point to another object . Pay attention to this prototype It's an object , All the properties and methods of this object , Will be owned by constructors .
We can take those unchanging methods , Directly defined in prototype On the object , In this way, all instances of objects can share these methods .
So in the above example, we can put the public function in the prototype object , This will not cause a waste of memory

Then we understand what the prototype is , He is an object , We call prototype For prototype objects

What is the role of the prototype ？ Four words , Sharing method

2. Object prototype __proto__

Objects have a property __ proto__ To the constructor prototype Prototype object , The reason why we can use constructors for objects prototype Properties and methods of prototype objects , It's because the object has _ proto_ The existence of archetypes .
On the object, the system adds a __proto__ Point to the prototype object of our constructor , therefore __proto__ Object prototypes and prototype objects prototype It is equivalent. .

Let's verify , See what's going to come out ：

​

  The final output is true Proof object prototype __proto__ And prototype objects protptype It is equivalent.

So the search rule of the method is to first look at stu1 Does the object have school Method , If there is, execute the... On this object school, without school This method , Because there is __proto__ The existence of , Go to constructor prototype object prototype Look for school This method

If you still don't understand , Figure out your question ：​

3.constructor Constructors

Object prototype (__proto__) and Constructors ( prototype ) Prototype object There is an attribute in it constructor attribute , constructor We call it constructors , Because it points back to the constructor itself .

Let's print student.prototype and stu1.__type__ See if there is constructor attribute ：

​

  You can see it all in here constructor, that constructor What's the point ？

constructor It is mainly used to record which constructor the object refers to , It allows the prototype object to point back to the original constructor

We know that we can define those public methods in the prototype object , But what if there are many public methods , It's much more convenient for us to store in the form of objects ：

Then we output the of the prototype object constructor See if there's any change ：

The final output is like this ：
​

  Why is that ,constructor It shouldn't point to us student Constructor

Because we passed student.prototype.school This belongs to adding methods to the prototype object , But we just belong to , In this way, the original prototype Everything in the has been covered , such student.prototype There is no constructor 了 , No, constructor Naturally, I can't point back student Constructor

At this time, we need to use it manually constructor This property refers back to the original constructor

Let's output the of the prototype object again constructor：

​

  In this way, we can know which constructor is used to create this object

Now let's update the constructor 、 example 、 Relationship diagram of prototype object ：

​

4. Prototype chain

because student Prototype object is also an object , As we said before, as long as it is an object, there is an object prototype

Let's print the prototype object to see if there is a prototype in it ：

Output results ：

​

You can see that there is also a prototype in the prototype object , And because the prototype points to the prototype object , So this student.prototype Inside __proto__ Who is it pointing to ？

Let's print ：

You can see that it points to this constructor Pointing to Object Prototype object

​

Object Who created the prototype object , There is no doubt that Object Constructor created . So let's move on ,Object Prototype object is also an object , Then it also has a prototype , Who does this prototype point to ？

Let's output ：

The final result is empty ：

​

This brings you to the top floor , So we can string these together to get a prototype chain ：

​

5. In prototype object this Point to

We know that in the constructor this It points to an object instance , So the functions in the prototype object , In this function this Who is it pointing to ？

  We declare a global variable that, Put... In the prototype object this Assign to that, Look at this. that Is it an instance object ：

Output results ：

​

So in the prototype object function this It also points to the instance object stu1 

6. Extend built-in objects （ Application of prototype object ）

We can use prototype objects , The method of extending and customizing the original built-in object . For example, add a custom summation function to the array

Let's output the prototype object of the array , See what's inside ：

​

There are no custom summation functions for arrays , Then we add this method to the prototype object of the array ：

We customize sum In the method ,this.length It refers to the length of the array that calls this method , Because in the previous section, we know that in the prototype object function this It also points to the instance object

We go through new Method to create an array instance object , We add... To the prototype object of the array sum Method , Then our instance object can call it .

Output results ：

​

Let's print the prototype object of the array again , See if there is sum Method ：

​

You can see sum Successfully added to the prototype object of the array , So we continue to use array summation , You can call it directly sum The method .

​