Note: nuggets are not synchronous updates, see the latest versionCSDN blog

As a front-end engineer, it is necessary to understand the prototype, __proto__ and constructor attributes in JS. I believe that many beginners have a lot of confusion on these attributes and are easy to confuse them. This article aims to help you clarify the relationship between them and thoroughly understand them. Note that the __proto__ attribute is made up of two underscores on each side (there is a space between the underscores: __proto_). This article is based on experimental results from Google Chrome (version 72.0.3626.121).

Let’s get started! Let’s start with a simple example, with a diagram to help you understand:

function Foo() {... };let f1 = new Foo();
Copy the code

The above code creates a constructorFoo()And usenewThe keyword instantiates the constructor to get an instantiated objectf1. These are two simple lines of code, but the relationship behind them is complex, as shown below:

See this figure don’t be afraid, let us step by step analysis, thoroughly understand them!

The red arrow points to the __proto__ attribute, the green arrow points to the Prototype attribute, the brown solid line arrow points to the inherent constructor attribute, and the brown dashed line arrow points to the inherited constructor attribute. The blue squares represent objects, and the light green squares represent functions. (For clarity, Foo() is only a function, not the result of executing function Foo, as is the case with other functions in the diagram.) The connection is in the middle of the diagram, and the example code is at the far left of the diagram.

First of all, we need to keep in mind two points: ①__proto__andconstructorAttributes areobject2. Peculiar to; 2.prototypeAttributes arefunctionUnique to. But since functions in JS are also objects, so do functions__proto__andconstructorAttributes, this is a big part of the puzzle. The figure above is a bit complicated, so let’s break it down by properties and analyze it:One, we’re just going to leave here__proto__Property, it isUnique to the objectAs you can see__proto__Attributes are all made up ofAn object points to an objectThat is, the prototype object that points to them (also known as the parent object), so what does this property do? It’sroleWhen accessing a property of an object, if the property does not exist inside the object, it will be removed__proto__Property to the parent object, if the parent object does not have the property, continue to the parent object__proto__Property to the object, if not found, continue to find…. Up to the top of the prototype chainnull(Can be interpreted as primitive…) , if not found, returnundefined(It can be understood that it is no longer the category of “people” to find it, so it ends here), by the above kind of passage__proto__Property to connect objects untilnullOne of the strands of alpha is what we call alphaPrototype chain.

Second, let’s seeprototypeProperties:  prototypeProperties, remember, the second of the two things we mentioned earlier to keep in mind, is thetaUnique to a functionIt is fromA function refers to an object. What it means isThe prototype object of a functionIs the prototype object of the instance created by this function (all functions can be constructors).f1.__proto__ === Foo.prototypeThey are exactly the same. theprototypeWhat are attributes for? It’sroleInclude properties and methods that can be shared by all instances of a particular type, so that objects instantiated by the function can find common properties and methods.When any function is created, the default is to create its prototype object as well.

Finally, let’s take a lookconstructorProperties:  constructorAttribute isOwned by the objectIt is fromAn object refers to a functionThe implication is thatConstructor that points to the objectEach object has a constructor (either owned or inherited, or combined)__proto__Properties can be viewed more clearly, as shown in the figure below), as shown in the figure aboveFunctionThis object is special in that its constructor is itself (because Function can be viewed as a Function or an object), and all functions and objects are ultimately derived from the Function constructor, soconstructorThe end point of the property isFunctionThis function.Thank you for pointing out, here to explain the paragraph“Every object has a constructor”This sentence. The idea here is that each object can find its corresponding constructor, because the premise of creating an object is to have a constructor, which may be explicitly defined by the object itself or by the constructor itself__proto__I found it in the prototype chain.For the constructor property alone, only the Prototype object has it. When each function is created, JS creates a prototype object corresponding to the function, andProto__ === the function created. Prototype, the function. Prototype. constructor=== the function itselfSo an object created from a function can pass even if it has no constructor attribute of its own__proto__Find the corresponding constructor, so that any object can eventually find its constructor (except null if it is an object). As follows:

To sum up:

  1. We need to keep in mind two points: ①__proto__andconstructorAttributes areobject2. Peculiar to; 2.prototypeAttributes arefunctionBecause a function is also an object, a function also owns it__proto__andconstructorProperties.

  2. __proto__Properties of theroleWhen accessing a property of an object, if the property does not exist inside the object, it will be removed__proto__Property to the object (the parent object), keep looking, until__proto__End point of attributenull.And then returnundefined, which is equivalent to retrieving attributes on null, and an error is reported. through__proto__Property to connect objects to the link thatWhat we call the prototype chain.

  3. prototypeProperties of theroleAll objects instantiated by this function can find common properties and methods, i.ef1.__proto__ === Foo.prototype.

  4. constructorThe definition of a property isConstructor that points to the object, all functions (now considered objects) point to the final constructorFunction.

That concludes this article for those who are confused by the prototype, __proto__, and constructor attributes in JS.

Finally, thanks to the two blog posts, part of this paper reference from this two blog posts: www.cnblogs.com/xiaohuochai…

www.cnblogs.com/Narcotic/p/…