foreword

If you want to learn JS well, the prototype chain is essential. The prototype chain is a mechanism that means that each JavaScript object, including the prototype object, has a built-in __proto__ attribute pointing to the prototype object of the function object that created it, that is, the prototype attribute.

What is the prototype chain?

The prototype chain is the historical record of the prototype object creation process. When accessing a certain property of an object, it will first search on the property of the object itself.

Let's talk about the constructor

First, constructors have static members and instance members

1. Instance member: It is the member added through this inside the constructor. The name, age, sex, and eat here are all instance members, which can only be accessed through the instance object, not through the constructor.

2. Static member: It is a member added directly on the function itself, which can only be accessed through the constructor.

When we create an instance object through a constructor, the object has duplicate attributes, so we will create duplicates every time we create it, causing a lot of waste, so we use the prototype chain.

prototype

JS stipulates that each constructor has a prototype that points to another object. This prototype is both an object and a property, all of which are owned by the constructor.

We can put those constant methods on the prototype, then this will save resources, and all instances can access this method.

In this way, we can still use the instance person1 created by our Person to access the eat function

Each object will have a property called __proto__, which will point to the prototype of the constructor that constructed it.

From the above code, we can see that __proto__ points to the prototype, so our instance can access the methods on the prototype chain.

new keyword

When we use the constructor to create instance members, we will use the new keyword, so what is the new keyword used for?

In fact, the role of the new keyword is divided into five steps:

1. A new object is created

2. Point the this of the constructor to this new object

3. Point the __proto__ attribute of the new object to the prototype attribute of the constructor (the prototype object of the constructor)

4. Execute the constructor

5. Return this

After reading step 3 above, we know why person1.__proto__ === Person.prototype

JS everything is an object

Why is everything in our JS an object?

We can derive the answer from the prototype chain

In the above code, we can see that looking up along the prototype chain, we actually found Object, which is why everything is an object.

The above is actually related to objects, so what about our function prototype chain ?

It is not difficult to see from the above code that our constructor finds __proto__ and finds Function.prototype, then we can conclude that all functions are constructed by Function objects, and our Object is also constructed by Function. So isn’t this a contradiction to the fact that everything above us is an object? We can continue to look down along this. We found that Function.prototype.__proto__ can find Object.prototype, and we found it back to the object from the function!

You can carefully understand who the __proto__ prototype points to according to the above picture

Prototype Chain Inheritance

The prototype chain can also be inherited because our prototype __proto__ actually stores an address in it, and they are all found according to the address. You can look at the figure below to understand the inheritance of the prototype chain

If you want to understand the prototype chain more deeply, you can refer to the following articles:

Understanding of the Prototype Chain (Comprehensive)

Talking about Prototype Chain

Article Directory