An example shows the prototype object and prototype chain. The example shows the prototype object.

An example shows the prototype object and prototype chain. The example shows the prototype object.
Opening

I used to understand prototype chains and prototype objects in js. Whenever someone asks me what prototype chains and prototype objects are, I always describe them in an official (actually I don't know) explanation. One sentence is good: if you cannot describe a complicated thing in the simplest words, it means you have no real understanding. Recently I am reading Javascript advanced programming. I have benefited a lot from the description of prototype objects and prototype links. Here is only a comparative example.

We often write this

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

The above code is very simple. The Person prototype object defines a public say method. Although this occurs after the instance is constructed, the prototype method has been declared before the call, therefore, each instance will have this method. In this simple example, we can conclude that:

The purpose of a prototype object is to store shared methods and attributes for each instance object. It is just a common object. All instances share the same prototype object. Therefore, unlike instance methods or attributes, the prototype object has only one copy.

Therefore, the following equation is true:

    person.say == new Person().say

Maybe we will write it like this.

    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

Unfortunately, the person. say method is not found, so an error is reported. In fact, the original intention is good: if we want to add more attributes and methods to the prototype object, we have to write a line of Person every time. prototype, it is better to extract it into an Object directly. However, this example may cause a problem when constructing an instance object before adding a prototype method:
WhenVar person = new Person ()The Person. prototype is:Person {}(Of course, there is also the constructor attribute inside), that is, Person. prototype points to an empty object {}. For instance person, there is a prototype chain pointer inside it.ProtoThe Pointer Points to the object pointed to by Person. prototype, that is {}. Next, we reset the Person prototype object so that it points to another object, that is

 Object {say: function}

At this time, person.ProtoDoes not change, it points to the {} object does not have the say method, because this error is reported.

From this phenomenon, we can conclude that:

In js, when an object calls a method, it first looks for whether the method exists in itself. If it does not, it goes to the prototype chain to find the method, and goes through the process layer by layer, the prototype chain here is the Instance Object'sProtoAttribute.

To make the above example run successfully, the simplest and most effective method is to swap the order of the constructor object and reset the prototype object, that is:

    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

A figure that helps you understand the prototype chain in seconds

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

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

Summary:

The function's prototype object constructor points to the function itself by default. In addition to the original type attributes, the prototype object also has a prototype chain pointer to implement inheritance.ProtoThe pointer refers to the prototype object of the previous layer, while the structure of the prototype object of the previous layer is still similar.ProtoAlways point to the Object's prototype Object, and the Object's prototype Object uses the Object.Proto= Null indicates the top of the prototype chain, which is transformed into the inheritance of the prototype chain of javascript. It also explains why all javascript objects have basic methods of Object.

Blog sync