An example that lets you understand prototype objects and prototype chains

Opening

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.

    function Person () {        this.name = ‘John‘; } var person = new Person(); Person.prototype.say = function() { console.log(‘Hello,‘ + this.name); }; person.say();//Hello,John

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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.

Therefore, the following equation is established:

    person.say == new Person().say

• 1

• 1

Maybe we'll write that too.

    function Person () {        this.name = ‘John‘; } var person = new Person(); Person.prototype = { say: function() { console.log(‘Hello,‘ + this.name); } }; person.say();//person.say is not a function

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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 is also the constructor property inside), That is, Person.prototype points to an empty object {}. For instance person, there is a prototype chain pointer Protoinside it, which points to the object that Person.prototype points to, which is {}. The person's prototype object is then reset to point to another object,

Object {say: function}

• 1

• 1

Then person. The point of Proto is still unchanged, it points to the {} object inside there is no say method, because this 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:

    function Person () {        this.name = ‘John‘; } Person.prototype = { say: function() { console.log(‘Hello,‘ + this.name); } }; var person = new Person(); person.say();//person.say is not a function

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

A picture gives you a second understanding of the prototype chain

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

    Function.prototype = {        constructor : Function,        __proto__ : parent prototype,        ...    };

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Summarize:

The prototype object of the function constructor to the function itself by default, the prototype object has a prototype attribute, 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 always points to the prototype object of object, while the object's prototype objects are 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.

An example that lets you understand prototype objects and prototype chains