JS prototype, prototype chain in-depth understanding

prototype is a more difficult concept in JavaScript, the prototype related properties are also more, the object has "prototype" property, the Function object has "prototype" property, the prototype object has "constructor" property.

First, the initial knowledge of the prototype
In JavaScript, the prototype is also an object, the prototype can implement the object's property inheritance, JavaScript object contains a "[[]]" internal property, which corresponds to the object's prototype.
"[[Prototype]]" is not directly accessible as an intrinsic property of an object. So to make it easier to see the prototypes of an object, Firefox and Chrome provide __proto__, a non-standard (not all browsers support) accessor (ECMA introduces the standard object prototype accessor "Object.getprototype (object)" ）。 In the JavaScript prototype object, there is also a "constructor" property that corresponds to the constructor that creates all instances of the prototype

II. rules
In JavaScript, each function has a prototype property, and when a function is used as a constructor to create an instance, the value of the prototype property of the function is assigned as a prototype to all object instances (that is, the ' __proto__ ' attribute of the set instance). In other words, the prototype of all instances refers to the prototype property of the function. (* * * * Only the function object will have this property! ")

The new process is divided into three steps

?

1	varp = newPerson(‘张三‘,20);

1. Var p={}; Initializes an object of P.
2. P._proto_=person.prototype, set the __proto__ property of the object p to Person.prototype
3. Person.call (P, "Zhang San", 20); Call the constructor person to initialize p. About call/apply Use

third, the first knowledge of object
The object is itself a function object. (CODE TEST) since it is an object function, there must be a prototype property, so you can see that the value of "Object.prototype" is the prototype object of "object {}". Conversely, when accessing the "constructor" property of the "Object.prototype" object, the OBEJCT function is obtained.
In addition, when you get the prototype of the object prototype through "Object.prototype._proto_", you will get "null", which means that the "object {}" prototype object is the end of the prototype chain.
Iv. Initial knowledge of function
as the constructor in the example above, the function in JavaScript is also an object, so you can find the prototype of the constructor object through _proto_.
A function object is a prototype property, which corresponds to the "function () {}" object.
A Function object, as an object, has the __proto__ property, which corresponds to "Function.prototype", that is, "function._proto_ = = = Function.prototype".

Here is a brief introduction to "prototype" and "Proto":
For all objects, there is the __proto__ property, which is the prototype of the object that should be.
For a function object, in addition to the __proto__ property, there is a prototype property, and when a function is used as a constructor to create an instance, the prototype property value of the function is assigned to all object instances (that is, the __proto__ property of the instance is set).

Prototype chain structure diagram

Prototype chain
Because each object and prototype has a prototype, the object's prototype points to the prototype object,
The parent's prototype also points to the parent's parent, and the prototype layer joins together to form the prototype chain.

First, attribute lookup
When looking up a property of an object, JavaScript traverses the prototype chain up until it finds the property of the given name, until the lookup reaches the top of the prototype chain (that is, object.prototype), and returns undefined if the specified property is still not found.

?

1 2 3 4 5 6 7 8 9

function Person(name, age){     this.name = name;     this.age = age;   } Person.prototype.MaxNumber = 9999;Person.__proto__.MinNumber = -9999;var will = new Person("Will", 28); console.log(will.MaxNumber); // 9999 console.log(will.MinNumber); // undefined

In this example, "Person.prototype" and "Person.proto" are added to the two prototype objects "MaxNumber" and "Minnumber" attribute, here you need to understand the "prototype" and "Proto" difference.

"Person.prototype" corresponds to the person who constructs all instances of the prototype, that is, "Person.prototype" is part of these instances of the prototype chain, so when these instances for property lookup, it will refer to the " Person.prototype the properties in the.

How object creation affects the prototype chain

?

1 2 3 4 5 6 7 8

var July = {    name: "张三",    age: 28,    getInfo: function(){      console.log(this.name + " is " + this.age + " years old");    } } console.log(July.getInfo());

When you create an object in this way, the prototype chain becomes. The prototype of the July object is "Object.prototype", which means that the way the object is built affects the form of the prototype chain.

{} object prototype chain structure diagram

The comprehensive picture describes
1. All objects have the __proto__ property, which is the prototype of the object that should be.
2. All function objects have the prototype property, and the value of the property is assigned to the pair 3 created by the function. The _proto_ property of the image.
4. All prototype objects have the constructor property, which corresponds to the constructor that creates all instances of the prototype.
5. Function objects and prototype objects are interrelated through prototype and constructor properties.

JS prototype, prototype chain in-depth understanding