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

Editor to share with you how to use prototype, _ _ proto__ and constructor in JS. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

1. Preface

As a front-end engineer, we must understand the prototype, _ _ proto__ and constructor attributes in JS. I believe many beginners are confused about these attributes and are easy to confuse them. The purpose of this article is to help you sort out the relationship between them and understand them thoroughly. It is pointed out here that both sides of the _ _ proto__ attribute are composed of two underscores (here, to make it easier for you to see, a space is added between the two underscores: _ _ proto__). In fact, the name of this attribute in the ES standard definition should be [[Prototype]]. The specific implementation is implemented by the browser agent itself, and the implementation of Google browser is to name [[Prototype]] as _ _ proto__. You can understand the difference between this standard definition and the specific implementation (the name is different, the function is the same). This paper is based on the experimental results of Google browser (version 72.0.3626.121).

Now it's official! Let's start with the following simple example, accompanied by a related diagram to help understand:

Function Foo () {...}; let F1 = new Foo ()

The above code means to create a constructor Foo () and instantiate the constructor with the new keyword to get an instantiated object F1. Here is a slight supplement to the procedure when the new operator calls the function as a constructor: the function is called, and then a new object is created and becomes the context of the function (that is, the this inside the function points to the newly created object, which means that we can initialize the value inside the constructor function through the this parameter), and finally return a reference to the new object. Although they are simple two lines of code, the relationship behind them is complex, as shown in the following figure:

Don't be afraid to see this picture, let's analyze it step by step and understand them thoroughly!

Description of the figure: the lower right corner is the legend, the red arrow indicates the direction of the _ _ proto__ attribute, the green arrow indicates the direction of the prototype attribute, the brown solid line arrow indicates the direction of the constructor attribute, and the brown dotted arrow indicates the direction of the inherited constructor attribute. The blue square represents the object, and the light green square represents the function (here, Foo () only represents the function, not the result of executing the function Foo, the other functions in the figure are the same). The middle part of the diagram is the connection between them, and the leftmost part of the diagram is the example code.

2. _ _ proto _ _ attribute

First, we need to keep in mind two things: the ① _ proto__ and constructor properties are unique to the object, and the ② prototype property is unique to the function. But because a function in JS is also an object, the function also has _ _ proto__ and constructor attributes, which is one of the big reasons for our confusion. The image above is a little complicated, so let's take it apart according to its attributes and analyze it:

First, we only leave the _ _ proto__ attribute here, which is unique to the object. We can see that the _ _ proto__ attribute points to an object from an object, that is, to their prototype object (which can also be understood as the parent object), so what is the purpose of this property? Its function is that when accessing the property of an object, if the attribute does not exist within the object, it will look for it in the object pointed to by its _ _ proto__ attribute (which can be understood as the parent object). If the parent object does not have this property, it will continue to look for the object pointed to by the _ _ proto__ attribute of the parent object (which can be understood as grandpa object). If it has not been found yet. Then continue to look up... To the top of the prototype chain null (can be understood as primitive man. ), looking up is equivalent to taking a value on null, which will report an error (it can be understood that further up is no longer the category of "human", can not be found, and at this end, null is the end of the prototype chain). The above chain that connects objects through the _ _ proto__ attribute to null is what we call the prototype chain.

3. Prototype attribute

Second, let's take a look at the prototype property:

The prototype property, don't forget, is the second of the two points we mentioned earlier to keep in mind, which is unique to a function and points to an object from a function. It means the prototype object of the function, that is, the prototype object of the instance created by this function (in fact, all functions can be used as constructors). From this we can know: f1.prototype prototype _ = = Foo.prototype, they are exactly the same. So what is the purpose of the prototype attribute? Its purpose is to contain properties and methods that can be shared by all instances of a particular type, that is, so that objects instantiated by this function can find common properties and methods. When any function is created, it actually creates the prototype object of that function by default.

4. Constructor attribute

Finally, let's look at the constructor property:

The constructor attribute is also owned by an object. It points to a function from an object, which means that it points to the constructor of the object. Each object has a constructor (it is owned or inherited by itself, and it is clearer to view it with the _ _ proto__ attribute, as shown in the following figure). You can see from the above figure that Function is a special object. Its constructor is itself (because Function can be seen as a function or an object), and all functions and objects are ultimately derived from the Function constructor, so the end point of the constructor property is the Function function.

Thanks to the netizens for pointing out, here is an explanation of the sentence "every object has a constructor" in the previous paragraph. What this means is that each object can find its corresponding constructor, because the creation of an object requires a constructor, which may be explicitly defined by the object itself or found in the prototype chain through _ _ proto__. In terms of the constructor property alone, only the prototype object has it. When each function is created, JS creates a prototype object corresponding to the function at the same time, and the object created by the function. _ _ proto__ = the function .prototype, the function .prototype.constructor = the function itself, so even if the object created by the function does not have the constructor attribute, it can find the corresponding constructor through _ _ proto__, so any object can eventually find its constructor (null if it is regarded as an object). Except for null). As follows:

5. Summary

To sum up:

We need to keep in mind two things: the ① _ _ proto__ and constructor properties are unique to the object; the ② prototype property is unique to the function, because the function is also an object, so the function also has the _ _ proto__ and constructor properties.

The function of the _ _ proto__ attribute is that when accessing the property of an object, if this attribute does not exist within the object, it will look in the object (parent object) pointed to by its _ _ proto__ attribute and keep looking until the end point of the _ _ proto__ attribute null. Looking up is equivalent to taking a value on null and will report an error. The link that connects objects through the _ _ proto__ attribute is what we call a prototype chain.

The purpose of the prototype property is to make the objects instantiated by this function find the common properties and methods, namely, f1. Primitive prototypes _ = = Foo.prototype.

The meaning of the constructor attribute is to point to the constructor of the object, and the final constructor of all functions (now regarded as objects) points to Function.

The above is all the contents of the article "how to use prototype, _ _ proto__ and constructor in JS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.