The prototype chain is simple

The prototype

Js advanced programming: Every function we create has a Prototype property, if the property is a pointer to an object whose purpose isContains can be shared by all instances of a particular typeProperties and methods of.

Prototype is the prototype object of the object instance created by calling the constructor. The advantage of using a prototype object is that you can add this information directly to the prototype object.

Put another way, a stereotype is an attribute of a Function object that defines the common ancestor of the objects produced by the constructor, which can inherit the attributes and methods of the stereotype. Note that the == prototype is also an object ==, and the instance object looks at the prototype through the implicit __proto__ attribute.

1. Every instance object of a function points to the same prototype object.

      function A(){}
      var a = new A();
      var b = new A();
   a.__proto__===A.prototype  //true
   b.__proto__===A.prototype  //true
Copy the code

2. All functions have a property called function prototype. By default, prototype is a plain Object on which you can add properties and methods.

     function Animals(name,age){
         this.name = name;
         this.age = age;
    }
    Animals.prototype.getAnimal = function(){
        console.log(this.name,this.age);// Prints dog 5
    } // Add functions to the prototype.
    let animal = new Animals('dog'.5);
    animal.getAnimal();// Call the function on the prototype
Copy the code

3. In JavaScript, we don’t copy one object (” class “) to another object (” instance “), we just associate them. Visually, the [[Prototype]] mechanism looks like this, with arrows from right to left and bottom to top:

This mechanism is often referred to as stereotype inheritance and is often thought of as class inheritance for dynamic language versions.

4. By default, Prototype has a property constructor, which is also an object pointing to the constructor itself.

Animals.prototype.constructor===Animals //true
Copy the code

5. If there is no method called by the instance object inside the function, it will look in the prototype chain, so if there is a method called by the instance object inside the function, it will call the method inside the function directly.

   function ABC(name){
            this.getName = function(){
                console.log(name);
            }
        }
        ABC.prototype.getName = function(){
            console.log('hello')}var abc = new ABC('ZF')
   abc.getName();// Call getName to print ZF
Copy the code

Note that since prototype refers to an object as a reference type, if the function’s prototype points to another new object, its instance object’s proto will no longer point to its prototype;

 function ABC() {
            ABC.prototype = {
            }
        }
        var abc = new ABC()
        abc.__proto__===ABC.prototype  //false
Copy the code

7. Do three problems

 1.
  Person.prototype.name = 'Merry'
  function Person(){
      
  }
  var person = new Person();
  Person.prototype.name = 'Xiaoing'
  console.log(person.name); 
  ---------------------------
2.
 Person.prototype.name = 'Merry'
  function Person(){
      
  }
  var person = new Person();
  Person.prototype = {
      name:'Xiaoing'
  }
  console.log(person.name);
 3.
Person.prototype.name = 'Merry'
  function Person(){   
  }
  Person.prototype={
      name:'Xiaoing'
  }
  var person = new Person();
  console.log(person.name);
 
 
 
Copy the code

Print “Xiaoing” in the first question, “Merry” in the second question, and “Xiaoing” in the third question.

Because when ==new==, an implicit pointer is generated inside the function`this = {proto:Person.prototype}`==new==, so there is a difference between placing the prototype pointer before and after ==new==. It is understood that the prototype pointer of the constructor is determined when ==new==.

Prototype chain

As the main method of inheritance, the basic idea of stereotype chain is to make one reference type inherit the attributes and methods of another reference type by using stereotypes.

The relationship between constructors, prototypes, and instances: Each constructor has a prototype object, which contains a pointer to the constructor __proto__.

If we make a prototype object is equal to another instance of the prototype, the prototype of the object will contain a pointer to another prototype, accordingly, another prototype also contains a pointer to another constructor, if another prototype are another type of instance, then established the relationship still, so walk, constitutes instance and the prototype chain, That’s the prototype chain.

  Person.prototype.like = "play";
        function Person() {}var person = new Person();
        Father.prototype = person;
        function Father() {
            this.age = 18;
        }
        var father = new Father();
        function Son() {
            this.name = "zf"
        }
        Son.prototype = father;
        var son = new Son();
        console.log(son.name); //zf
        console.log(son.age); / / 18
        console.log(son.like); //play
Copy the code

The relationship is as follows:

Function is special, its prototype and __proto__ refer to its prototype,

Function.prototype===Function__proto__.Copy the code

Instance objects’ __proto__ ends up pointing to Object.prototype, so objects can use the object. prototype method.

The following figure clearly shows the pointing relationship on the prototype chain.

When an instance Object needs a method, it looks up the prototype chain until it reaches Object.prototype. From this we can override the Object.prototype method on the function prototype, or add a custom method to the function prototype.

 Array.prototype.myAdd = function () {
           return 'Hello.';
       }
       var arr = new Array(a);var result = arr.myAdd();
       console.log(result);  / / hello
Copy the code

So let’s look at the following problem

function User() {}
User.prototype.sayHello = function() {}

var u1 = new User();
var u2 = new User();

console.log(u1.sayHello === u2.sayHello); 
console.log(User.prototype.constructor); 
console.log(User.prototype === Function.prototype); 
console.log(User.__proto__ === Function.prototype);
console.log(User.__proto__ === Function.__proto__); 
console.log(u1.__proto__ === u2.__proto__);  
console.log(u1.__proto__ === User.__proto__); 
console.log(Function.__proto__ === Object.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype);
Copy the code

Check out the answer

console.log(u1.sayHello === u2.sayHello); //true
console.log(User.prototype.constructor); //User Function
console.log(User.prototype === Function.prototype); // false
console.log(User.proto === Function.prototype); // true
console.log(User.proto === Function.proto); // true
console.log(u1.proto === u2.proto); // true
console.log(u1.proto === User.proto); // false
console.log(Function.proto === Object.proto); // true
console.log(Function.prototype.proto === Object.prototype.proto); // false
console.log(Function.prototype.proto === Object.prototype); // true