Js (Prototype prototype Chain)

`Prototype and prototype chain is JS beginner's nightmare although not used in the working process but to understand it for us to write code to see the source code has a great promotion!`

What is archetypal nerd? We create every function that has a prototype property and that property is a pointer to an object and the object’s job is to hold all the properties and methods shared by all instances of that type and point to that object and that’s what we call a prototype object

What does the prototype object do? The advantage is that all object instances can share the properties and methods it contains. In other words, instead of defining information about the object instance in the constructor, information is added directly to the prototype object

The prototype concept

In JS everything is an object and every JS object that’s created is associated with another object and that object is what we call a prototype and every object inherits properties from that prototype

prototype

In JS every function has a prototype property that points to the function’s prototype object when the function is used to construct objects that inherit the properties of the prototype object

function Person(){}
Person.prototype.name = "protoName"
var person1 = new Person()
console.log(Person1.name)   //protName
Copy the code

1 Notice that person1 has no name on it

2 so he’s going to go to the constructor Person

3 And the person function itself has no name attribute

4 so I go to Person.prototype

So I’m going to go to the Person prototype and that’s the basic prototype chain

Graphical execution steps

proto

When a constructor is called to create a new instance that instance will have inside it an internal property that points to the prototype object of the constructor and that property is proto and every object has an _proto_ property that points to the prototype of that object which is to say

function Person(){}    
var person1 = new Person()
console.log(person1._proto_ === Person.prototype) // true  
Copy the code

Diagram the steps to perform

constructor

Each prototype has a constructor that points to the associated constructor

function Person(){}
var Person1 = new Person() 
console.log(Person.prototype.constructor === Person)                //true   
console.log(Person.prototype.constructor === Person1.constructor)   //true
Copy the code

Person1 itself doesn’t have a constructor property so the UI goes down the chain to its constructor function person and the constructor’s prototype has a constructor property on it which means person1 doesn’t have a constructor property Find the constructor property of Person.prototype as shown in the figure below

Prototype of prototype

A prototype is essentially an Object, so an Object can be constructed from a new Object, which means that the _proto_ property of the prototype points to the prototype of the prototype, which is object.prototype

function Perrson(){}
var person1 = new Perrson();
console.log(Person.__proto__ === Function.prototype)         // true
console.log(Person.prototype.__proto__ === Object.prototype) // true
Copy the code

In summary, from javascript Advanced Programming

Each constructor has a prototype object. The prototype object contains a pointer to the constructor and each instance contains an internal pointer to the object. 2 What if we make the prototype equal to the instance result of another type? At this time a prototype object will contain a pointer to another prototype corresponding another prototype also contains a pointer to another constructor If another prototype is another instance of a type Then in accordance with such layer formed in the establishment of the relation instance in the prototype chain This is called the prototype chain of the basic concepts of 3 Is not a face meng force ha ha ha

I understand it

That is to say If the function of a prototype is the function of b instance objects The function prototype is the function of b c c an instance of the object function of the prototype is an instance of the object function d A b c d will constitute a prototype chain At this point if the function of a instance objects need to find a property x to function when I was in the function to find a find a prototype If you can’t find any more, you go up to the prototype of b which means you go down the prototype chain and you go up the prototype chain and you go up the prototype chain and you go up the prototype chain

Methods for constructing archetypal relationships

Instanceof function Person(){} var person1 = new Person() console.log(person1 instanceof) Person) //true console.log(person1 instanceof Object) //true //isPrototypeOf / / usage and instanceof function about the Person () {} var person1 = new Person () the console. The log (Person) prototype) isPrototypeOf (person1)) // true console.log(Object.prototype.isPrototypeOf(person1)) // trueCopy the code

Creating a function creates a Prototype property for it that points to the function’s prototype object. The prototype object automatically gets the constructor property that points to the function whose Prototype property belongs. 2 When an object calls a method or attribute, it looks in itself first, if it finds it, it calls it, if it doesn’t find it, it looks in the prototype object along __proto__, if it hasn’t found it, it continues to look in the prototype object until null, thus forming a chain called the prototype chain. Return undefined if not found.

Portotype andproto

Every function created has a property called prototype that points to the function’s prototype (the prototype object that calls the function). Proto Implicit Prototype Every object in JS has a built-in property called Prototype

 // Code examples?
 function Test(){
     const test = new Test();
 }
 test._proto_ === Test.prototype; //true
 Object instances have the _proto_ attribute. They are all used to access the prototype object
 // Function is not only a function but also an object so it also has the _proto_ attribute
Copy the code

demo

   // Create an object constructor
    function Person(){
        // Set some properties and values through the prototype object
        Person.prototype.name ="changDongDong"
        Person.prototype.age = 18
        Person.prototype.height = 1.88
        Person.prototype.sayHellow = function(){
            alert(this.name)
    }
    // Create two object instances and call methods
    }
    var person1 = new Person()
    var person2 = new Person()
    person1.sayHellow();     //changDongDong
    person1.sayHellow();     //changDongDong> In the code above, properties and methods are not set separately for the instance object, but are set directly for the prototype object. The purpose of the prototype object is to share these properties and methods with all objects. > So when the sayHellow() method is called, they print out that they are sharedCopy the code

Prototype and prototype chain is JS beginner's nightmare although not used in the working process but to understand it for us to write code to see the source code has a great promotion!