Web front-end - prototype chain learning research summary

First look at a piece of code:

<script>
    Function.lol = "迅捷提摸";
    Function.prototype.lol = "麦田炮手";
    Object.lol = "卡特琳娜";
    Object.prototype.lol = "抱走萝莉";

    function Show(){
        this.lol = "寒冰艾稀";
    }
    Show.prototype.lol = "漫天肥羽";

    var show = new Show();
    console.log(show.lol);
    /* 
        可以把Show对象看成是一个人，而 lol 可以比喻成一件衣服。
        现在天冷了，我们需要找一件波丝登穿到身上：console.log(show.lol)
        首先看看自己身上是不是已经穿上这件波丝登了：this.lol
        发现自己身上已经穿着波丝登羽绒服了：this.lol = "寒冰艾稀"，那么就确定是这件衣服了。
        如果发现自己身上没穿羽绒服：this.lol = null或者没有定义。
        那么就在自己房间找一找：Show.prototype.lol = "漫天肥羽";
        如果自己的房间也没有，Show.prototype.lol = null，或者没有定义。
        那么就去自己爸爸身上找一找，看看不是爹给穿了：Object.lol。
        发现自己的爹穿不上自己的衣服，在爹身上找根本就是脑子进屎了，应该在爹的房间找才对：Object.prototype.lol
        爹房间也没有，还是去爷爷房间找一下吧：Function.prototype.lol = "麦田炮手";
        如果在爷爷的房间也没找到，说明是自己根本没有羽绒服。
     */
     /* 
         另外，每一个对象身上还有一个constructor属性,这个属性其实是该对象本身自己
         就跟去服装店里买衣服，拿了一块镜子一样，镜子中的自己就是自己，而这个constructor就是
         自己手中拿着的镜子。
      */
      console.log(typeof show.constructor);//结果类型是function
      console.log(Show === show.constructor);//结果为true
</script>

Let me talk about the priority and method of finding values ​​in this code: this.lol => Show.prototype.lol => Object.prototype.lol => Function.prototype.lol 

Why this happens is related to the prototype chain.

Prototype chain: The chain where js code finds values ​​on the prototype.

Prototype: Prototype is also an object, which can be simply understood as the prototype of a constructor.

Through the information printed on the console, we can see that there is a prototype attribute on the prototype of the constructor Show, and on the prototype of the instance object show we created, there are our defined attributes lol and the __proto__ provided by the system Attributes

then look down

We can see that the prototype attribute on the prototype is the same as the __proto__ attribute on the instance object, so the __proto__ attribute on the instance object is the prototype attribute on the prototype, and they both contain a constructor attribute object.

Let's look at the pointer to the constructor.

As you can see, this constructor is actually our constructor Show, which is the same as the Show we saw at first.

From here we can see that the constructor, prototype, and instance object, the three of them are like a triangle relationship.

The above picture is the basic relationship of the prototype chain. Next, we add a method on the prototype and create two instance objects.

We found that the value passed in when creating an instance can only be shared by the specifically created instance, while the method added through the prototype of the constructor can be shared by all instances.

The relationship between prototype and Object:

On the prototype of the constructor, there is also a __proto__ attribute object, which points to the prototype of Object.

Through the initial example, we know that the __proto__ of the instance object refers to the prototype of the constructor. Here, the obj we print is the instance of Object, and the __proto__ inside is Object.prototype. There is also a constructor inside, pointing to the Object constructor. It's just that there is no __proto__ on Object.prototype, but it can be printed out, and the result is null. It can be understood that Object.prototype.__proto__ points to null, that is, there is nothing below.

Function prototype chain:

Through some of the above tests, we can know that the __proto__ of the instance object is the prototype of the constructor. But there is also a __proto__ above the constructor

What is this thing? Click on this __proto__ and you can see that there is also a constructor attribute in it, and this constructor points to Function. Therefore, we can draw a conclusion: the __proto__ of the constructor is the prototype of Function, and Function.prototype.constructor is the constructor of Function. Then, our custom constructor (such as Show) and the constructor provided by the system are instances of Function, which is equivalent to: var Function = new Function();

Let's print out this Function to see what's on it.

Function also has prototype and __proto__ attributes, but they are found to be the same thing, so Function.__proto__ is Function.prototype

There is also a __proto__ in the prototype of Fcuntion, which also points to Object.prototype.

Therefore, the process of the entire prototype chain is: