preface

First, the __proto__ property refers to the prototype object of the current object, the prototype property of the constructor.

In fact, this property is called [[Prototype]] in the ES standard definition. The implementation is implemented by the browser proxy itself. The Google Browser implementation named [[Prototype]] __proto__ is used to return the Prototype object.

We will analyze the process through the following code:

function Person(name) {
    this.name = name
}
let person = new Person('male')
Copy the code

Here is the whole flow chart I drew:

First, let’s keep three things in mind:

Three things to keep in mind:

  • The __proto__ and constructor attributes are unique to objects because only constructors can create objects. Since functions are also objects (both functions and objects are objects created by Function), functions also have __proto__ and constructor attributes

  • The Prototype attribute is unique to functions.

  • Prototype is a Function type, and its __proto__ attribute points to Object.prototype, which is compatible with previous JS code.

Next, let’s analyze it step by step:

Prototype chain

As shown in the figure above, the red box is the prototype chain.

The process is as follows:

  • PersonThe constructor passesnew Person() To create thepersonInstance.
  • Instance is an object, so it owns__proto__Property (that is, the prototype of the instance) that points to the prototype of PersonPerson.prototypeAnd thePerson.prototypeIt’s also an object, so it’s also down here__proto__Property that points to the prototype of ObjectObject.prototype
  • Object.prototypeIt’s also an object, so it’s also down here__proto__Property, pointing tonull

When a Person instance is created, it inherits the constructor’s prototype and its private properties and methods. When a property or method is used, it looks for the constructor itself. If it doesn’t find the property or method, it looks for the constructor through the prototype. Object is a top-level Object. The browser also defines many method properties, such as Object.create. If there is no such method or property in Object, the prototype of Object points to NULL. So undefined is reported.

So that’s the whole prototype chain and what it means.

Person and Function

Note that Function is capitalized; it is a built-in browser Function similar to Object. Our Person function, on the other hand, is a normal constructor. So what are they related to each other? I’m sure there are a lot of beginners who have this question, how do ordinary functions come from? Who created it? Function is a constructor, and ordinary functions are called Function objects because they are created by Function constructors. Let’s take a look at their relationship using the above diagram, mainly from the constructor attribute and the prototype.

  • PersonThe prototype of the function isPerson.prototype, thenPerson.prototypeThe constructor of the object isPerson
  • personInstance constructors are special and inheritedPerson.prototypeConstructor of, i.epersonSo is the instance constructorPersonFunction.
  • thenPersonWhat’s the constructor of the function? Who created him, of courseFunctionfunction