Prototype and prototype chain

Constructor Show Prototype Object===Implicit Prototype Object for Instance Object of Current Constructor

• A prototype is an object. Its purpose is to provide objects with shared data to other objects.

  A function object, either by itself or by object name()Way to execute the function.

  A normal object is an object, not a direct object name()To call the function.

• Constructor. c1,c2 are instance objects of Car, and they have a constructor property that points to the current constructor.

  function Car(name) {
          this.name = name;
      }
      var c1 = new Car('c1');
      var c2 = new Car('c2');

      console.log(c1.constructor === Car); //true

• Prototype object

  js，Each object defined(Functions are also objects)，There will always be default properties. So there will be one in each function object prototype Property that points to the prototype object of the function

Note here that each object has a u proto_u property, but only function objects have a prototype property

• By default, all prototype objects automatically get a constructor property (a pointer) that points to the function (Car) in which the prototype property resides.
• In the above constructors, instance objects also have constructor properties that point to the current constructor.
• Therefore, the prototype object (Car.prototype) is an instance of the function object (Car) (the purpose is to indicate that the prototype is an object.)

  function Person(name) {
          this.name = name;
      }
      var p1 = new Person();
      console.log(Person.prototype.__proto__ === Object.prototype);
      console.log(Object.prototype.__proto__ === null);
      console.log(Object.__proto__ === Function.prototype);
      console.log(Function.__proto__ === Function.prototype);
      console.log(Function.prototype.__proto__ === Object.prototype);
      //true true true true true

All functions, including constructors and built-in Object() functions, are instance objects of Function() (understood in conjunction with Function() and Object() in the figure below).

inherit

• Prototype Chain Inheritance
  • Each constructor has a prototype object that contains a pointer to the constructor, while instances contain an internal pointer to the prototype object. Inheritance occurs when the prototype object equals another type of instance.

     function Animal(){
       this.name = "animal"
     }
     Animal.prototype = {
       sayName : function(){
         alert(this.name);
       }
     }
     //Define Subclass Types
     function Dog(){
       this.color = "gray"
     }
     //Inheritance is accomplished by pointing the prototype object of the child object to an instance of the parent object
     Dog.prototype = new Animal();
     //The method of a child object is actually defined on an instance of a symbol class object.
     Dog.prototype.sayColor = function(){
       alert(this.color);
     }
     var dog = new Dog();
     console.log(dog);
     dog.sayColor();
     dog.sayName();
  

  • Question:
    • When inheritance is achieved through a prototype, the prototype actually becomes an instance of another type, and the original instance property becomes the prototype property now.
    • When creating instances of subtypes, parameters cannot be passed to supertype constructors. Therefore, prototype chains are rarely used separately in practice.
• Borrow Constructor
  • Also known as Fake Object or Classic Inheritance, supertype constructors are called inside subtype constructors.

   function Animal(name){
     this.name = name;
     this.colors = ["red","gray"];
   }
   function Dog(name){
     //Inherited Animal
     Animal.call(this,name);
     this.color = "gray";
   }
   Animal.prototype.sayName = function(){
     alert(this.name);
   }
  

• Combinatorial function
  • Also known as pseudoclassical inheritance, this combines prototype chains with borrowed constructor techniques. The principle is that prototype chains are used to inherit prototype properties and methods, and constructors are used to inherit instance properties.

   function Animal(name){
     this.name = name;
     this.colors = ["red","gray"];
   }
   function Dog(name){
     //Inherited Animal (Attribute)
     Animal.call(this,name);
     this.color = "gray";
   }
   Animal.prototype.sayName = function(){
     alert(this.name);
   }
   //Inheritance Method
   Dog.prototype = new Animal();
   Dog.prototype.constructor = Dog;