Ultimate explanation of JS prototype and prototype chain, and details of js prototype

Ultimate explanation of JS prototype and prototype chain, and details of js prototype

1. Common objects and function objects
In JavaScript, everything is an object! But there are also differences between objects. It can be divided into common objects and Function objects. Objects and functions are built-in Function objects of JS. The following is an example

Function f1 (){};
Var f2 = function (){};
Var f3 = new Function ('str', 'console. log (str )');

Var o3 = new f1 ();
Var o1 = {};
Var o2 = new Object ();

Console. log (typeof Object); // function
Console. log (typeof Function); // function
Console. log (typeof o1); // object
Console. log (typeof o2); // object
Console. log (typeof o3); // object
Console. log (typeof f1); // function
Console. log (typeof f2); // function
Console. log (typeof f3); // function

In the preceding example, o1 o2 o3 is a common object, and f1 f2 f3 is a function object. How to differentiate is actually very simple. All objects created through new Function () are Function objects, while others are common objects. F1 and f2 are all created using the new Function () method. Function objects are also created through New Function.

Ii. Prototype object
In JavaScript, every time an object (function) is defined, the object contains predefined attributes. One Property of the function object is prototype. Note: common objects do not have prototype, but haveProtoAttribute.

The prototype object is actually a Common Object (except Function. prototype, which is a Function object, but it is very special. It does not have the prototype attribute (previously mentioned that Function objects all have the prototype attribute )). See the following example:
Function f1 (){};
Console. log (f1.prototype) // f1 {}
Console. log (typeof f1. prototype) // Object
Console. log (typeof Function. prototype) // Function, this special
Console. log (typeof Object. prototype) // Object
Console. log (typeof Function. prototype. prototype) // undefined

From the output of console. log (f1.prototype) // f1 {}, we can see that f1.prototype is an f1 instance object. When f1 is created, it creates an instance object and assigns prototype to it. The basic process is as follows:
Var temp = new f1 ();
F1. prototype = temp;

Therefore, why is Function. prototype A Function object solved? All objects generated by new Function () are Function objects, so temp1 is a Function object.
Var temp1 = new Function ();
Function. prototype = temp1;

What is the prototype used? It is mainly used for inheritance. For example:
Var person = function (name ){
This. name = name
};
Person. prototype. getName = function (){
Return this. name;
}
Var zenders = new person ('hangzhou ');
Zjh. getName (); // zhangjiahao

From this example, we can see that by setting the property of a function object for person. prototype, a common object from the person instance (in this example: z.pdf) inherits this property. The following prototype chain is required for the implementation of inheritance.

Iii. prototype chain
When JS creates an object (whether a common object or a function object), it is calledProtoIs used to point to the prototype of the created function object. The preceding example is used as an example:

Console. log (zconsole.Proto=== Person. prototype) // true

Similarly, the person. prototype object also hasProtoProperty, pointing to the prototype of the function Object

Console. log (person. prototype.Proto=== Object. prototype) // true

Continue. The Object. prototype Object also hasProtoAttribute, but it is special. It is null.

Console. log (Object. prototype.Proto) // Null

We haveProtoUntil the Object. prototype.ProtoA null chain is called a prototype chain. For example:

Iv. Memory Structure
For a deeper and more intuitive understanding, we will draw the above memory structure diagram:
! [Write the image description here]

Explanation:
1. Object.Proto=== Function. prototype // true
An Object is a Function Object created through new Function.ProtoPoint to Function. prototype.

2. Function.Proto=== Function. prototype // true
A Function is also an object Function and created through new Function.ProtoPoint to Function. prototype.

It seems that you are created by yourself and it does not conform to the logic, but think about it carefully. The real world is similar. How did you come from your mom, you have been born ,...... Where did the ape come from when it evolved? Keep tracing ......, Is none. (NULL creates everything)
As the moral Sutra says, "No, the beginning of the world ".

3. Function. prototype.Proto=== Object. prototype // true
In fact, I am also a little confused, but I can try to explain it.
Function. prototype is a Function object. In theory, itsProtoIt should point to Function. prototype, which is his own, pointing to himself, meaningless.
JS has always stressed that everything is an Object, and function objects are also objects. It recognizes the ancestor and points to Object. prototype. Object. prototype.Proto= Null to ensure that the prototype chain can end normally.

V. constructor
The prototype object has a predefined constructor attribute, which is used to reference its function objects. This is a type of circular reference.
Person. prototype. constructor === person // true
Function. prototype. constructor === Function // true
Object. prototype. constructor === Object // true

Complete the above memory structure:

Note the following two points:
(1) Note that Object. constructor === Function; // true itself, the Object is constructed by the Function.
(2) how to find the constructor of an object is to find the object pointed to by the first constructor attribute on the prototype chain of the object.

Vi. Summary
1. prototype and prototype chain are a model inherited by JS implementation.
2. The formation of prototype chain is actually dependent onProtoInstead of prototype

If you want to understand this sentence in depth, let's take another example to see if you have really understood it before?
Var animal = function (){};
Var dog = function (){};

Animal. price = 2000 ;//
Dog. prototype = animal;
Var tidy = new dog ();

Console. log (dog. price) // undefined
Console. log (tidy. price) // 2000

Why? Draw a memory diagram:

What is the problem? Run dog. the price attribute is not found. Although the animal to which prototype points has this attribute, it does not search for it along this "chain. Similarly, this attribute is not available when tidy. price is executed,ProtoPointing to animal, which will be searched along this chain. animal has the price attribute, so tidy. price outputs 2000. It is concluded that the real formation of the prototype chain depends onProroInstead of prototype.
Therefore, if dog is specified in this way.Proto= Animal. Dog. price = 2000.

In the end, although it is not very accurate, it may be helpful to understand the prototype.

Father (function object), Mr. has a eldest son (prototype), that is, your eldest brother. His father bought many toys for your eldest brother. When you were born, your family ties (Proto) Will make you naturally have your eldest brother's toys. Similarly, you have a eldest son and bought many toys for him. When you regenerate your son, your youngest son will naturally own all the toys of your eldest son. As for whether they will fight, this is not our case.
So you inherited from your eldest brother and confirmed the sentence "brother-in-law!