In-depth understanding of JS prototype and prototype chain_javascript skills

Prototype is a concept that is difficult to understand in JavaScript. There are many attributes related to prototypes. Objects have "prototype" attributes, function objects have "prototype" attributes, and prototype objects have "constructor" attributes. .

1. First introduction to the prototype
In JavaScript, the prototype is also an object. Through the prototype, the property inheritance of the object can be realized. JavaScript objects all contain a "[[Prototype]]" internal property, which corresponds to the prototype of the object.
"[[Prototype]]" is an internal property of the object and cannot be accessed directly. So in order to conveniently view the prototype of an object, Firefox and Chrome provide the non-standard (not supported by all browsers) __proto__ accessor (ECMA introduced the standard object prototype accessor "Object.getPrototype(object)") . The JavaScript prototype object also contains a "constructor" attribute, which corresponds to the constructor that creates all instances pointing to the prototype

2. Rules
In JavaScript, each function has a prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of this function will be assigned to all object instances as a prototype (that is, setting the instance's `__proto__` attribute), that is, the prototype of all instances refers to the prototype attribute of the function. (****`Only function objects will have this attribute!`****)

The process of new is divided into three steps

var p = new Person('张三',20);

1. var p={}; Initialize an object p.
2. p._proto_=Person.prototype;, set the __proto__ attribute of object p to Person.prototype
3. Person.call(p,"Zhang San",20); Call the constructor Person to initialize p. About the use of call/apply

3. First acquaintance with Object
The Object object itself is a function object. (CODE TEST) Since it is an Object function, it must have a prototype attribute, so you can see that the value of "Object.prototype" is the prototype object "Object {}". In turn, when the "constructor" property of the "Object.prototype" object is accessed, the Object 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.
4. First introduction to Function
Like the constructor in the above example, functions in JavaScript are also objects, so you can find the prototype of the constructor object through _proto_.
As a function, the Function object will have a prototype attribute, which will correspond to the "function () {}" object.
As an object, the Function object has the __proto__ attribute, 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 a __proto__ attribute, which corresponds to the prototype of the object.
For function objects, in addition to the __proto__ attribute, there is also the prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of the function will be assigned to all object instances as the prototype (that is, setting the instance __proto__ attribute)

Prototype chain structure diagram

Prototype Chain
Because every object and prototype has a prototype, the prototype of the object points to the prototype object,
The prototype of the parent points to the parent of the parent. These prototypes are connected layer by layer to form a prototype chain.

1. Attribute search
When looking for a property of an object, JavaScript will traverse the prototype chain upwards until it finds a property with a given name. When the search reaches the top of the prototype chain (that is, Object.prototype), if the specified property is still not found, it will return undefined.

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, the "MaxNumber" and "MinNumber" attributes are added to the two prototype objects "Person.prototype" and "Person.proto" respectively. Here you need to clarify the difference between "prototype" and "proto" .

"Person.prototype" corresponds to the prototype of all instances constructed by Person. That is to say, "Person.prototype" is part of the prototype chain of these instances, so when these instances perform attribute search, they will reference "Person" Properties in .prototype ".

The way objects are created affects the prototype chain

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

When an object is created in this way, the prototype chain becomes the following figure. The prototype of the July object is "Object.prototype", which means that the way the object is constructed will affect the form of the prototype chain.

{}Object prototype chain structure diagram

Overview of the picture
1. All objects have the __proto__ attribute, which corresponds to the prototype of the object.
2. All function objects have a prototype attribute, and the value of this attribute will be assigned to the object created by the function. 3. The _proto_ attribute of the object.
4. All prototype objects have a constructor attribute, which corresponds to the constructor that creates all instances pointing to the prototype.
5. Function objects and prototype objects are related to each other through the prototype and constructor attributes.

The above will introduce the detailed content of JS prototype and prototype chain. I hope it will be helpful to everyone's learning.