A personal understanding of the JavaScript prototype chain

First, JS is an object-facing language, although most of the time it is presented in the form of the face process. Take a look at the code first:

function Base () {    this. Name = ' Tarol ';}  function Sub () {    this. Age =;}  var New  = b; var New  //' Tarol '

The results are believed to be known, but the implementation of the principle is unclear, and then line-wise analysis:

= b;

Prototype is a unique property of a function object (a function is also an object), and the normal object does not exist for this property, which defaults to {}. The function of this property is to assign this property to an object that is instantiated using this function as a constructor, as an internal property of the object [[Propertype]]. The so-called internal attribute is the attribute that cannot be accessed by JS, fortunately the modern browser has opened the access to this property, and the General property name is __proto__. So:

var New Sub;

This section, which can also be said for each new operation, can be expanded:

var s == sub.prototype; Sub.call (s);

　　It is visible that after an object is instantiated, the coupling to the constructor is the __proto__ property of the former and the latter's prototype property as a reference to the same object.

Then __proto__ this internal attribute is used to do what, is used to achieve the "inheritance" in JS. This "inheritance" is used to distinguish the idea of class inheritance in C + + and Java, which is called prototype inheritance .

The principle of prototype inheritance is that each object holds a reference to another object (that is, __proto__, which is the prototype), which eventually points to null (which is also an object), and when any of the properties of the object is accessed, if it is not found in this object, it is __proto__ The object that is pointing to is searched until the end of the prototype chain is null. It is important to note that all elements in the prototype chain are instantiated objects .

Now go back to the code above, when the property name of the object s is accessed, it is not found in S, so it runs to the instance object of the base where S __proto__ points, and finds the name ' Tarol '.

But if the properties of the S gender are not found in S and s.__proto__, continue to s.__ proto__.__proto__ in Search. by s.__proto__ = = = New Base, we know s.__proto__.__proto__ = = = Base.prototype (i.e. new Constructor ()). __proto__ = = = Constructor.prototype) . As mentioned above, prototype is {} By default, so it continues to be found in base.prototype.__proto__, i.e. (new Object ()). __proto__ = = = Object.prototype. If you don't add some custom properties, Object.prototype is also {}, so it seems like you're going to be stuck in an infinite loop, but in fact the prototype chain goes to the end, because the browser defines object.prototype.__proto__ = null. Using the following process to comb the,--> represents the delivery on the prototype chain, = = = represents the substitution between different references of the object.

S.gender --s.__proto__.gender = = = Sub.prototype.gender = = B.gender-B. __proto__.gender = = = Base.prototype.gender = = = (New object ( )). Gender---(new Object ()). __proto__.gender = = = Object.prototype.gender-object.prototype.__proto__ = = = Null

Object.prototype.__proto__ is also the end of the chain of all object prototypes, including function (the constructor itself is also an object), Date (Normal object), Math (a single built-in object), Because Function.prototype is the default {}, it goes into the process above (new Object ()). Gender this phase.

Finally, give a chestnut:

function Class () {} var New  new  Class; var New  = = = a.__proto__);

One of the most confusing estimates is that

New Class;

If you use class inheritance to understand, you will mistakenly assume that this code will fall into a dead loop call, but note that the Scarlet letter above indicates that: all elements in the prototype chain are instantiated objects . That is, this is simply inserting an object into the front of the prototype chain of the class object (except the object itself), as to whether the object is new class or new Glass (see the first paragraph of the Scarlet Letter, which modifies the reference of the constructor so that __proto__ The coupling between and prototype is lifted, and it can be said that the object and the constructor are "separated", without affecting the calling process. So, the purpose of this code is to modify the class constructor so that it instantiates the object's prototype chain length of +1.

Write a little messy, if over a period of time I can not understand and then come back to change.

Reference:

Understanding JavaScript Object-oriented thinking by Wen Shen

"Some understandings about __proto__ and prototype" by Tonycoolzhu

"JavaScript advanced Programming" by Nicholas C.zakas

A personal understanding of the JavaScript prototype chain