JavaScript prototype objects and prototype chains

begins

Before I knew about the prototype chain and the prototype object in JS, I always used the official (I don't know) explanation to describe the prototype chain and the prototype object whenever someone asked me. It's a good thing to say: if you can't describe a very complicated thing in the simplest words, it means you don't really understand. I have benefited from the recent reading of JavaScript Advanced Programming, which describes the prototype object and the prototype chain, which is illustrated in a contrasting example.

That 's what we always write .

1     functionPerson () {2          This. Name = ' John ';3     }4     varperson =NewPerson ();5Person.prototype.say =function() {6Console.log (' Hello, ' + This. Name);7     };8Person.say ();//Hello,john

The code is very simple, and the person prototype object defines a common say method, although this occurs after the instance is constructed, but since the prototype method has been declared before the call, each subsequent instance will have the method. From this simple example, we can conclude that:

The purpose of a prototype object is to store shared methods and properties for each instance object, which is just a normal object. And all instances are shared with the same prototype object, so unlike instance methods or properties, the prototype object has only one copy.

All will have the following equation set up:

  person.say == new Person().say

Maybe we'll write that too .

1     functionPerson () {2          This. Name = ' John ';3     }4     varperson =NewPerson ();5Person.prototype = {6Sayfunction() {7Console.log (' Hello, ' + This. Name);8         }9     };TenPerson.say ();//Person.say is not a function

Unfortunately, the Person.say method was not found, so the error. In fact, the original intention is good: because if you want to add more properties and methods on the prototype object, we have to write a line person.prototype each time, rather than refining into an object directly. But this is a clever example of how to construct an instance object operation before adding a prototype method, which creates a problem: When var person = new Person() , Person.prototype is: Person {} (of course, there are constructor properties inside), That is, Person.prototype points to an empty object {}. For instance person, there is a prototype chain pointer __proto__ inside it, which points to the object that Person.prototype points to, which is {}. Next, the person's prototype object is reset to point to another object, that is Object {say: function} , the point of person.__proto__ is not changed, it points to the {} object inside there is no say method, because the error. From this phenomenon we can draw:

In JS, the object in the invocation of a method will first look for the method in itself, if not, then go to the prototype chain to find, in turn, layer by step, where the prototype chain is the __proto__ property of the instance object.

The simplest and most effective way to make the above example run successfully is to exchange the order of the constructed objects and reset the prototype objects, namely:

1     functionPerson () {2          This. Name = ' John ';3     }4Person.prototype = {5Sayfunction() {6Console.log (' Hello, ' + This. Name);7         }8     };9     varperson =NewPerson ();TenPerson.say ();//Person.say is not a function

a picture gives you a second understanding of the prototype chain

In fact, you just need to understand the structure of the prototype object:

1     Function.prototype = {2        constructor:function,3        __proto__: Parent Prototype,4        Some prototype properties: ... 5     };

Summary:

The prototype object of the function constructor to the function itself by default, in addition to the prototype properties, in order to implement inheritance, there is also a prototype chain Pointer __proto__, which points to the previous layer of the prototype object, and the structure of the previous layer of the prototype object is still similar, so that the use of __proto__ A prototype object that always points to object, while the prototype object of object is used with object. Proto = null represents the top of the prototype chain, thus changing the prototype chain inheritance of JavaScript and explaining why all JavaScript objects have the basic method of object.

Article Learning from https://kkkkkxiaofei.github.io/jekyll/update/2015/06/03/proto.html

JavaScript prototype objects and prototype chains