Do you really understand the things about "prototype"? [part I]

List of articles ：

  One ： Constructors

 1.1 Constructor usage

 1.2  Constructors new Implementation process of

new Execution process

1.3 Instance members and static members  

Two ： Prototype object  prototype

2.1 Why are there prototype objects

2.2  The use of prototype objects

  3、 ... and ： Object prototype __proto__

3.1 What is an object prototype ？

3.2 About object prototypes __proto__ Points for attention  

Search principle of method

Four ： Constructors constructor 

4.1 Why? constructor It's also called a constructor

4.2 Manual return constructor The situation of

  What is a prototype ？ The prototype is JS Concepts we haven't mentioned in basic learning , Prototype is a general term , Mainly consists of   Prototype object (prototype) ,  Object prototype (__proto__),  Prototype chain   wait , According to statistics, these concepts are also often asked in interviews , This article will take you to understand and master the relevant knowledge of prototype , Let everyone no longer be confused .

---

  One ： Constructors

      We have learned many object-oriented languages , for example java c++ wait , however JavaScript The exception is , stay ES6 Before , There is no concept of a class , How do we create objects before ？ Originally in ES6 Before , We are using Constructors To create an instantiated object , A constructor is a special function , Contains the common features of the object , To cooperate new It makes sense to use them together .

---

Constructor considerations ：

• The first letter of the constructor name should be capitalized
• Constructors should match new Use it together

 1.1 Constructor usage

   <script> 
           function Animal(name,age){      // 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 cooperate  new  Use together to create objects 
           console.log(dog.name);
           console.log(dog.age);
           dog.eat()
   </script>

 1.2  Constructors new Implementation process of

new There are the following execution processes ：

• new An empty object will be created when
• In constructor this Point to this empty object
• Execute the code in the constructor to assign a value to the empty object , Add attribute method
• Return this object

---

1.3 Instance members and static members  

Instance members ：

• Instance members are for internal use this Added members
• Instance members can only be accessed through instantiated object calls , Cannot access through 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 by the constructor itself
• Static members can only be accessed through constructor names , Cannot access through instantiated objects

   <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>

---

Two ： Prototype object  prototype

2.1 Why are there prototype objects

Before starting to prototype what the object is , Let's start with a case , It's the same one just now Animal class , We created multiple instantiated objects , A comparison of two methods of outputting instantiated objects , We found the output false, That is, the addresses of the two complex data types are different , What's 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(' Hem ',3)     
      var fish=new Animal(' Murmur ',3)     
      var sheep=new Animal(' BAABAA ',3)     
      console.log(dog.eat==cat.eat);
</script>

In the process of creating instantiated objects ,new The process of creating a new object first , But complex data types will open up a space for storage （ object , Method ）, This is This causes the same method in the constructor to be opened up countless blocks of memory , Caused extreme waste of memory

2.2  The use of prototype objects

      Constructor prototype prototype Is an attribute in the constructor , Its attribute is a pointer , Point to an object , This object stores public methods , Methods that exist in this object , When you create an instantiated object through the constructor, you can make public use of this method , There is no need to open up multiple duplicate memory spaces for multiple complex data types . It is to solve the above problem of memory waste , It can also be directly referred to as the prototype object .

The above case solution ： 

Solution we use prototype objects to store public methods , And 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 did we successfully call this method , And the addresses of the two methods are the same , This proves , Its common complex data types only open up a memory space , It reduces the waste of resources written in the constructor of public methods .

---

  3、 ... and ： Object prototype __proto__

3.1 What is an object prototype ？

Object prototype __proto__ The function of is to let you figure out a problem ： Why is it given to constructors prototype Attribute adding method , Instantiated objects can use ？ This is because every object has a __proto__ attribute （ Note that there are two underscores before and after ）, This attribute is also a pointer , Refers to the prototype object of its corresponding constructor prototype, This explains why the instantiated object can call methods in the prototype object .

Or it can be understood as ：

• Prototype object prototype Equivalent to Object prototype __proto__

---

3.2 About object prototypes __proto__ Points for attention  

We should pay attention to the object prototype __protp__ The function of is only to provide a direction for finding the content in the prototype object , We don't need to use it , Just remember that it points to the prototype object of the corresponding constructor prototype that will do

---

Search principle of method ：

• First, find out whether there is a target method on the constructor that instantiates itself , If there is one, call
• If there is no , Because the object itself has properties __protp__, It points to the prototype object of the constructor prototype, Will find out whether the prototype object has this method

---

---

Four ： Constructors constructor 

4.1 Why? constructor It's also called a constructor

Object prototype __proto__ Prototype object of body and constructor prototype I have one on me constructor attribute , The name constructor It's 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

---

Print both constructor attribute ：

   <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 constructor The situation of

More often, we need to return manually constructor Which constructor is pointed to , For example, when multiple public methods are stored as objects in the prototype object of the constructor , The following will happen ：

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

---

  We found that it can't find the corresponding constructor , This is caused by the way we add methods to its prototype objects , The money we take is . Way to add , It is added on the original basis , It will not overwrite the original content inside . And we use = Methods of are added as objects , It is actually a process of assignment , The original content is also overwritten , This leads to prototype Internal original constructor Methods are overwritten

  At this time, we need to return manually constructor To find out which constructor is returned

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

So we can successfully get it constructor Which constructor is pointed to

The format for ：

• constructor : Constructor name  

That's all for this article , The next one is more wonderful ！！