Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what is JS prototype and prototype chain". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The Development History of 1.JS

In order to implement the core design idea of JS, we should start from the birth of JS.

1.1 Why was JavaScript born?

Relatively mature browsers were released by Netscape. In the early years, browsers could only browse web content and could not interact with users. For example, when we log in and enter a user name and password, we cannot judge whether the user has really entered it in the browser, but through the server. If there is no input, we will return an error prompt to the user. This design is a waste of time and server resources.

In order to solve this problem, Netscape needs to develop a scripting language that runs in the browser, which can be used to simply do user input verification and other operations.

The most popular language at that time was the object-oriented Java programming language, and Netscape named JavaScript in order to spread the browser scripting language with Java. In fact, there is no relationship between the two.

1.2 problems

The design of data types in JS is influenced by the popularity of Java at that time, and they are all object types. At this time, we encounter problems. Some objects must involve inheritance mechanism, so should the inheritance mechanism of JS be designed to be the same as Java? Or is there another design idea?

Design ideas inherited by 2.JS

The developers of JS wondered if the concept of "class" in design like Java would not become a completely object-oriented programming language like Java. Finally, I decided to design an inheritance mechanism, but its design idea still adopts some of the characteristics of Java.

2.1 generate object

Usually Java generates an object through the way of new, the process of generating an instance object through the class. But there are no classes in JS, so what should the designers of JS do?

He found that what Java and JS have in common is that both have constructors, which are actually called inside the procedure of Java's new. But JS has no concept of "class", so JS designs a "class" of new as a constructor of new, and the constructor becomes a prototype object of an instance object.

3. Why design prototype objects?

A fatal drawback of such a prototype design is that it cannot share common properties.

Because we know that for each new, the resulting instance is two different objects. So common attributes are not shared.

So to design an object specifically to store the properties shared by the object, we call it a "prototype object".

4. What is the prototype object?

If we want all instance objects generated by the constructor to share properties, we add a property called prototype to the constructor, which is used to point to the prototype object. We put all the properties and methods shared by the instance object in the prototype object pointed to by the prototype property of this constructor, without the need for shared properties and methods in the constructor.

A little confusion here is, do we know that objects can set properties, and functions can also set properties? It is rather ignorant for beginners, so we can say a little bit briefly:

Functions in JavaScript have all the capabilities of an object and therefore can be treated as any other type of object. When we say that the function is the first kind of object, that is to say, the function can also have some functions of the object, such as adding properties, passing functions as parameters, and so on.

So, once the instance object is created by the constructor, it automatically assigns properties or methods shared on the prototype object to the instance object. To be clear, the object properties point to the property values of the prototype object.

5. The relationship between objects and functions in the prototype chain?

The above diagram reflects the relationship between objects and functions in the prototype chain. If you feel that the picture above is confused, it doesn't matter. When I first started to learn the prototype chain, I had no idea what it was called "Riverside during the Qingming Festival". Deer below through step-by-step split explanation, look at this picture is very simple, yes, very simple.

We also talked about what a prototype object is at the beginning of the article. To put it bluntly, it is a prototype property of the constructor, which points to the prototype object.

In fact, some of our connection properties are not mentioned, we only talk about the prototype attribute, the following picture to complete the rest of the attributes, we just need to print this picture into the brain.

Let's analyze the figure above. First, we need to declare a constructor for a dog, defining its name and weight attribute (private attribute), and each constructor has a prototype attribute as we mentioned above.

This prototype points to the prototype object, which puts the properties shared by the object. Note, however, that there is a constructor property in the prototype object, which in turn refers to the constructor.

We use the new constructor to generate two object instances of dogs, one named Doudou and the other Beibei. These are two different objects with different names and weights, but they will share the attribute type on the prototype object, and the attributes they share are dogs.

In all JS objects, as long as it is an object, there will be a built-in property called _ proto_, and this property is automatically generated by the system, as long as you create an object, the object has this property. This _ proto_ attribute points to the prototype object.

Through the above distribution explanation, we understand the relationship between the constructor and the object instance as well as the prototype object.

It can be summed up as follows:

The prototype of the constructor points to the prototype object, which has a constructor attribute that points back to the constructor, and each instance object generated by the constructor has a _ proto_ property that points to the prototype object.

Yes, the prototype is that simple. But you will find that prototypes are also objects. You said that all objects have a _ proto_ attribute that points to the prototype object of its own constructor.

Yes, if you want to know who the _ proto_ property of the prototype object points to, you need to know which constructor created the prototype object?

We know that all JS objects inherit an object called Object. It can be understood that the Object constructor created this everything, their relationship is as follows, and the above is the same truth, the sentence summed up above have a good understanding.

But there is a question in the image above. The prototype object of the Object constructor is also an object, and it must also have a _ proto_ attribute, so why point to null?

We are taking the sentence summed up above, the _ proto_ attribute points to the prototype object of its own constructor, who is its own constructor? Is the Object constructor, so who is the prototype of the Object constructor? Itself, of course (see figure), so point _ proto_ to null.

The above relationship is really messy if it is not carefully sorted out, especially for beginners, but if it has been sorted out like Little Deer, and then the chaotic relationship makes it well organized and does not understand, read a few more articles.

6. Prototype chain

We still have one more problem to solve, which is the prototype chain? Now that you know what a prototype is, what is a prototype chain? As the name implies, it must be a chain. Since each object has a _ proto_ attribute pointing to the prototype object, the prototype object also has _ proto_ pointing to the prototype object of the prototype object, which does not reach the top of the prototype chain until it points to the null in the image above.

Don't forget, we haven't understood the picture above, we understand it from the top down.

The first picture is decomposed, and the relationship of the picture drawn by the deer above is the same as this. If you compare it carefully, it is very simple, and the first picture is solved in this way.

Let's continue to split down and look at the second picture.

Why does the second picture still look so familiar? isn't this the Object diagram analyzed above by Xiao Lu? Right, right.

The third picture, a little roundabout, but the soup does not change, listen to the deer analysis.

It still looks familiar, but changed function to Function,f and changed it to uppercase F. A knowledge point involved here is that in JS, all function functions are inherited by Function, which can be said to be the ancestor of all function.

Then who produced the Function? We see that the Function function in the figure has a _ proto_ attribute, and the attribute points to its own prototype object, so isn't it breeding itself? It's understandable.

This is the end of "what is the JS prototype and prototype chain". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.