JS advanced: prototype and __proto__, constructor and prototype chain, what is going on? Let me tell you a story~

Tell interesting knowledge in your own words .

Hi everyone, I am 梅巴哥er. I have seen many people have a cloud of feeling about the prototype chain, especially prototype and __proto__, which are like twins and are too abstract, stupid and unclear. In this article, we will talk about the knowledge of the prototype chain in the form of storytelling. It is not necessarily comprehensive.

First write an example:

log = console.log

function Star(name) {
    
    
    this.name = name 
}
Star.prototype.age = 18
var dili = new Star('dilireba')
log(Star.prototype)
log(dili.__proto__)
log(Star.prototype.constructor)

Before we start, let’s first understand how the prototype comes from.

Then let’s take a look at teacher Ruan Yifeng’s explanation: The design idea of Javascript inheritance mechanism .
simply put,

Prototype is an object, it exists in the function
This object can make a shared area
This object can add properties and methods to the shared shared area so that all instances of the constructor can be called.
For example Star.prototype.age = 18, the instances of the Star constructor at this time are all 18 years old.

What's the matter with proto?

proto is to provide a query chain for the instance
It is only used to point to the prototype, and cannot be used
Every object has a __proto__
For example, dili.__proto__it is the point Star.prototypeof

What is constructor?

There is a constructor in prototype and __proto__
The role is to make the prototype of the constructor point back to the constructor
For example, Star.protorype.constructorpoint toStar(){ }

After reading the theoretical knowledge, how do you understand them?

The story begins:

Xiao Ming and Xiao Hua went to the restaurant to eat hot pot together. Ordered a non-spicy pot bottom.

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 不辣
log(hua.type) // 不辣

Xiao Ming felt that the taste was not spicy enough, so he filled his own bowl with a spicy sauce and dipped it.

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
ming.type = '辣酱'
log(ming.type) // 辣酱
log(hua.type) // 不辣

So, Xiao Ming ate the hot sauce, and Xiao Hua ate the hot sauce which was not spicy. Now Xiaohua also wants to eat hot sauce, but he is embarrassed to eat hot sauce in Xiaoming's bowl, what should I do?

// 给小华也添加一份辣酱
hua.type = '辣酱'

In this way, Xiaohua also had the spicy sauce. But there is a problem. In this way, there will be no one share for the two of them and occupy too many resources. Is there a better way?

That's right, just add hot sauce directly to the bottom of the pot!

// 现在我们来改下代码
log = console.log

function Eat(name) {
    
    
    this.name = name 
}
Eat.prototype.type = '辣酱' // 往锅里加辣酱
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 辣酱
log(hua.type) // 辣酱

You see, this way both of you can eat hot pot with spicy sauce!

After reading the above story, is it clearer? Then, the question is, what is the relationship between these objects?

Then let's stroke it.

At the beginning, there was a restaurant that could offer hot pot to customers.
Insert picture description here
Now Xiao Ming and Xiao Hua come to eat hot pot.

The two wanted to share the hot sauce, so the hot sauce was added to the pot to make the bottom of the pot spicy.

Is it clearer now?

So what does the constructor have to do with them?

Come and continue to read the story.

Satiated and drunk, it's time to check out!

The waiter came over and took a look, ah, what you eat at this table is hot pot with spicy sauce?

Xiao Ming just said, we ordered the clear soup hot pot, but added hot sauce to it. So Xiao Ming took out the order menu and showed it to the waiter.
Insert picture description here

The role of costructor is to return to the original constructor, you see, Xiao Ming can show it to the waiter!

Well, seeing this, you can basically understand the relationship between these objects. So, what about the prototype chain?

Let's continue to tell the story.

Xiao Ming and Xiao Hua left the hot pot restaurant, and they are still discussing the spicy sauce hot pot that they ate today. That hot sauce is so delicious, where did it come from?

Xiaohua said, it must be the hot sauce produced by Laoganma's house. That shop produces many kinds of hot sauce. The hot sauce I ate today is the best! !

So, the two of them found Lao Gan Ma's place along the line of hot sauce.

Insert picture description here
Xiao Ming asked again at this time, what company is Lao Gan Ma?

Xiaohua said, Lao Gan Ma is the head office, and there is nothing on it! They specialize in hot sauce!

Insert picture description here
So, we got this picture!

This is the prototype chain!

What? Finished? I haven't heard enough of the story yet. Xiaohua, wait!

Reference article:

the above.