A brief introduction to JavaScript "prototype" and "prototype chain"

What is a prototype? Prototype is a concept that we did not mention in the basic learning of JS. Prototype is a general term that mainly includes Prototype object (prototype) , Object prototype (__proto__) , prototype chain Wait, these concepts are also commonly asked in interviews according to statistics. This article will help you understand and master the relevant knowledge of prototypes, so that you will no longer be confused.

1: Constructor

We have studied many object-oriented languages, such as Java, C++, etc., but JavaScript is an exception. Before ES6, there was no concept of classes. So how did we create objects before? It turns out that before ES6, we used constructors to create instantiated objects. The constructor is a special function that contains the public characteristics of the object. It only makes sense to use it in conjunction with new .

Notes on constructors:

• the first letter of the constructor name must be capitalized
• and the constructor must be used with new

1.1 How to use the constructor

<script> 
           function Animal(name,age){ //The first letter of the constructor name is capitalized this.name=name;
                this.age=age;
                this.eat=function(){
                  console.log('I'm eating');
                }
           }
           var dog=new Animal('Wangcai',3) //To be used together with new to create an object console.log(dog.name);
           console.log(dog.age);
           dog.eat()
   </script>

1.2 The execution process of constructor

new new has the following execution process:

• When new, an empty object will be created.
• This in the constructor points to this empty object,
• executes the code in the constructor, assigns a value to the empty object, and adds attribute methods
• to return this object
.

1.3 Instance members Static members and

instance members:

• Instance members are members added with this inside the property.
• Instance members can only be accessed through the instantiated object call and cannot be accessed through the constructor name

<script>
           function Animal(name,age){
                this.name=name;
                this.age=age;
           }
           var dog=new Animal('Wangcai',3)
           console.log(dog.name);
           console.log(Animal.name);
   </script>

Static members:

• Static members are members created through the constructor itself.
• Static members can only be accessed through the constructor name, not through the instantiated object

<script>
           function Animal(name,age){
                this.name=name;
                this.age=age;
           }
           var dog=new Animal('Wangcai',3)
           Animal.color='black'
           console.log(Animal.color);
           console.log(dog.color);
   </script>

2: Prototype object prototype

2.1 Why is there a prototype object?

Before starting to explain what a prototype object is, let us first explain a case. It is still the Animal class just now. We created multiple instantiated objects and output the two methods of their instantiated objects. After comparison, we found that false was output, that is, the addresses of the complex data types of the two are different. What is the reason?

<script> 
      function Animal(name,age){      
           this.name=name;
           this.age=age;
           this.eat=function(){
             console.log('I'm eating');
           }
      }
      var dog=new Animal('Wangcai',3)     
      var cat=new Animal('Mimi',3)     
      var pig=new Animal('humhem',3)     
      var fish=new Animal('Gulu',3)     
      var sheep=new Animal('咩咩',3)     
      console.log(dog.eat==cat.eat);
</script>

When we create an instantiated object, the new process will first create a new object, but complex data types will open up a space to store (objects, methods), which results in countless openings for the same method in the constructor. block memory, causing an extreme waste of memory

2.2 Use of prototype objects

Constructor prototype prototype is an attribute within the constructor. Its attribute is a pointer pointing to an object. This object stores public methods. The methods stored in this object are then used to create instances through the constructor. This method can be used publicly when converting objects, and there is no need to open up multiple duplicate memory spaces for multiple identical complex data types. In order to solve the above-mentioned memory waste problem, it can also be directly called a prototype object.

Solution to the above case:

Solution: We use the prototype object to store the public method, let the instantiated object call the method, and compare whether the addresses of the two are the same

<script> 
      function Animal(name,age){      
           this.name=name;
           this.age=age;
      }
      Animal.prototype.eat=function(){
          console.log('I'm eating');
      }
      var dog=new Animal('Wangcai',3)     
      var cat=new Animal('Mimi',3)     
      dog.eat()
      cat.eat()
      console.log(dog.eat==cat.eat);
</script>

We found that not only was this method successfully called, but the addresses of the two calling methods were the same. This proved that its public complex data type only opened up a memory space, reducing the number of public methods written in the constructor before. The problem of resource waste inside functions.

Three: Object prototype__proto__

3.1 What is an object prototype?

The function of the object prototype __proto__ is to let you figure out a question: Why can the method added to the prototype attribute of the constructor be used when instantiating the object? This is because every object has a __proto__ attribute (note that there are two underscores before and after). This attribute is also a pointer, pointing to the prototype object prototype of its corresponding constructor, which explains why the instantiated object You can call methods in the prototype object.

Or it can be understood as:

• prototype object prototype is equivalent to object prototype __proto__

3.2 Points to note about the object prototype __proto__

We should note that the function of the object prototype __protp__ is only to provide a direction for searching the content in the prototype object. We do not need to use it, we only need to remember that it points to the corresponding constructor. The prototype object prototype is

the method search principle:

• first find if there is a target method on the constructor that instantiates itself, and
• if there is no target method on its own constructor, call it because the object itself has the attribute __protp__, which points to the constructor. Prototype object prototype, you will look for the method on the prototype object.

Four: constructor function constructor

4.1 Why constructor is also called constructor

object prototype __proto__ and the prototype object prototype of the constructor function have a constructor attribute, so it is called constructor It is called a constructor because this attribute points to the corresponding constructor itself. It is mainly used to record which constructor the instantiated object refers to

and print the constructor attributes of both:

<script> 
      function Animal(name,age){      
           this.name=name;
           this.age=age;
      }
      Animal.prototype.eat=function(){
         console.log('I'm eating');
      }
     var dog=new Animal('Wangcai',4)
     console.log(dog.__proto__.constructor);
     console.log(Animal.prototype.constructor);
</script>

We found that the printed result is indeed the constructor itself

4.2 Manual return of constructor