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

This article is to share with you about how prototype, _ _ proto__ and constructor in JS are used. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

1. Preface

  , as a front-end engineer, 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).

   is now officially started! 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    diagram: 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 that it has, 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:

3. Prototype attribute

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

The above is how prototype, _ _ proto__ and constructor in JS are used. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.