This is the third day of my participation in the August Text Challenge.More challenges in August

XDM, recently boring in the vUE source code analysis, found in the VUE instance object VM and vUE component instance object vueComponent this part of the implementation is to use the prototype and prototype chain related knowledge points. Although the source code is really difficult to analyze (I don’t understand). Fortunately, I think I am familiar with the js prototype and prototype chain. Let me briefly talk about my understanding of prototypes and prototype chains!

Since it is simple, I will introduce a more complicated concept with the diagram I drew and then we will analyze it slowly (the left side of the diagram is the stack space, the right side is the heap space, 0xXXX is the address value of the reference object).

The object’s implicit prototype __proto__ points to the display prototype of its constructor

 function Fn() {
     this.a =1
 }

 Fn.prototype.b = 2

 let fn = new Fn()
 
 console.log(fn.a) / / 1
 console.log(fn.b) / / 2
 console.log(fn.c) //undefined
 console.log(fn.toString) //function
Copy the code

protpptye

Prototype — Displays the prototype. Every function in JS has this property. This property points to an object, which is called a stereotype object. By default, the prototype object has a constructor property that refers back to the function itself (similar to a doll). I found a picture to make it easier to understand

So what does this prototype object do? In short, we can add some custom methods to the prototype object, so that the new instance object can use these methods directly instead of writing them. An 🌰

We can see this when we search for array methods on MDN

It defines all the array methods in the protpType property, so we use the array method when directly used is very convenient!

proto

Proto — Implicit stereotype, which is a property of every object in JS. The value of this property points to the value of its constructor, ProtpType

So let’s verify that

 function Fn() {
     this.a =1
 }

 Fn.prototype.b = 2

 let fn = new Fn()
 console.log(Fn.prototype)
 console.log(fn.__proto__)
 console.log(Fn.prototype===fn.__proto__)
Copy the code

This implicit role is simply to find the attribute of the prototype, when we find a property of objects in the first place in the object itself may find, if found is returned, and if you can’t find will find __protp__ that line, to the object’s constructor prototype this property to find, and if found is returned as a result, If not, follow prototype’s __protp__ line to find it. And so on, of course, the infinite nesting process also has an end point, until the Object’s protpType __protp__ is found to be null, the search process is also called the prototype chain

Let’s go back and analyze the code and image at the beginning

Function Fn() {this.a = 1} first we create a constructor Fn whose address is 0x123

Fn.prototype.b = 2 We said that there is a prototype property in the function, and we can customize our own property on the prototype object. We’ll add a new property b on the prototype with a value of 2, The address of this prototype object is 0x234 let fn = new fn (). Fn is an instance of fn. Since it is an object, its implicit prototype must refer to the display prototype of its constructor, so the __proto__ of the instance object must be 0x234

    console.log(fn.a) / / 1
    console.log(fn.b) / / 2
    console.log(fn.c) //undefined 
    console.log(fn.toString) //function
Copy the code

Ok, we are looking at the four outputs, but we won’t talk about the first two, it’s easier. The third output is undefined. The instance Object FN does not have the property c itself, so it continues to search up its implicit prototype. The prototype Object also does not have the property C, so it continues to search up until it finds the prototype Object of Object

Why is the fourth output a function? Because the toString method is a built-in Object method, the JS engine helped us define the prototype of the Object constructor, so even if we don’t define the method ourselves, we can still get it!!

Ok, so much for prototypes and prototype chains. I feel good enough to handle interviews or look at the source code for some prototypes. If you are interested, you can study the prototype of Function by yourself. This one is more convoluted, so I won’t go into it here.

If I still liver move, we next time see 👋