[prototype and prototype chain] get to know prototype and prototype chain~

Prototype and prototype chain are js One of the difficult points to understand , But as long as you understand it carefully , There will be gains

Before introducing the prototype and prototype chain , Let's understand the following questions first

1. __proto__ and constructor The attribute is object Unique ;
2. prototype The attribute is function Unique , Because functions are also objects , So functions also have __proto__ and constructor attribute .

• Attribute function ：

1. __proto__ The function of attribute is to access the attribute of an object , If this property does not exist inside the object , Then I'll go to it __proto__ The object the property points to （ parent object ） Look inside , Keep looking for , until __proto__ End of attribute null, Then return undefined, To look up is to look up null Top value , Will report a mistake . adopt __proto__ The link that attributes connect objects is what we call the prototype chain .
2. prototype The function of attribute is to let the objects instantiated by this function find common attributes and methods , namely f1.proto === Foo.prototype.
3. constructor Property means the constructor that points to the object , All functions （ At this point as the object ） The final constructors all point to Function.

1. Prototype

• proto： Implicit prototype
• prototype： Explicit prototypes
• Objects have implicit prototypes __proto__.
• The function has a display prototype prototype.
• Object's __proto__ To its constructor prototype.

• all Reference type There is one. __proto__( Implicit prototype ) attribute , Property value is a normal object
• all function There is one. prototype( Prototype ) attribute , Property value is a normal object
• all reference-type __proto__ attribute To its constructor prototype

Let's first understand three concepts ：

1. proto

every last object There is one. __proto__ attribute , He points to the prototype of the object

function Person(){
    }
var person1 = new Person()
console.log(person1.__proto__ === Person.prototype) // true

2. prototype

every last function There is one. prototype attribute , This property points to the prototype object of the function

function Person(){
    }
Person.prototype.name = "protoName"
var person1 = new Person()
console.log(person1.name) // protoName

explain ：

• person1 There is no such thing as name This attribute , So it will go to constructor Person look for , and Person The function itself does not name attribute , therefore person1 Will go Person.prototype Look up , That is to say Person On the prototype of

3. constructor

Each prototype has a constructor attribute , The constructor pointing to the Association .
from constructor In terms of attributes , Only prototype Object has this attribute , And other objects constructor Attributes are all through __proto__ Objects from prototype inherited

function Person(){
    }
var person1 = new Person()
console.log(Person.prototype.constructor === Person) // true
console.log(Person.prototype.constructor === person1.constructor) // true

explain ：

• person1 There is no such thing as constructor attribute , So I will follow the prototype chain to find , Go to its constructor Person Search above , The prototype of constructor has constructor attribute

When the function is created ,JS A corresponding... Is created for this function prototype object , And this prototype Object's constructor Property in turn points to the function , namely Foo.prototype.constructor === Foo.

• The advantages of prototypes ：

• All properties and methods on the prototype object , Can be shared by the instance object created by the corresponding constructor *（ This is it. JavaScript The basic design of inheritance mechanism ）, in other words , You don't have to define the object instance information in the constructor , Instead, you can add this information directly to the prototype object .

• Each constructor has one prototype（ Prototype ） attribute , This attribute is the prototype object of the instance object created using the constructor .

2. Prototype chain

• Prototype chains are used for Build new types of objects based on existing objects . It is similar to inheritance in class based languages .

• Prototype on object instance It can be done by Object.getPrototypeOf(object) or proto attribute get , and Prototype on constructor It can be done by Object.prototype get .

Prototype chain features ：

• When reading a property of an object ,JavaScript The engine first looks for the properties of the object itself , If you can't find it , Go to its prototype , If I still can't find it , Go to the prototype . If you go up to the top Object.prototype Still can't find , Then return to undefined.
• If the object itself and its prototype , All define an attribute with the same name , Then the priority is to read the properties of the object itself , It's called “ Cover ”（overriding

Nearby principle

function Person(name,age){
    
	this.name = name;
	this.age = age;
}
Person.prototype.address = function(){
    
	console.log(" Address ");
}
var  xiaoming= new Person(" Xiao Ming ");
xiaoming.address();

• explain ：

1. Constructors Person adopt prototype Point to Person Prototype object prototype

2. Person Prototype object prototype Through its own construtor Property refers back to the constructor Star

3. Person Created an object instance xiaoming,xiaoming Through its own __proto__ Property points to its prototype object

• Be careful ：

One step up , Look for an attribute in the prototype chain , It has an impact on performance . The properties you are looking for are prototypes on the higher level , The greater the impact on performance . If you look for an attribute that doesn't exist , Will traverse the entire prototype chain

There will be deeper and better understood explanations in the future , I will slowly add