We start by creating an object using the constructor

       function Person() {}var person1 = new Person()
        person1.name = 'dada'
        console.log(person1.name);
Copy the code

In this column Person is the constructor person1 is an instance object of the Person constructor. Let’s get down to business:

pertotype

Each constructor has a pertoType property, as we often see in examples. Listed in:

        function Person() {

        }
        Person.prototype.name = 'Kevin';
        var person1 = new Person();
        var person2 = new Person();
        console.log(person1.name) // Kevin
        console.log(person2.name) // Kevin
Copy the code

So what does this function’s prototype point to? Is this the prototype for the constructor? Prototype refers to an object that is the prototype of the column created by calling the constructor (person1 and person2 in this case). I’ll draw a diagram to show the relationship between the constructor and the column prototype

So how do we represent the relationship between the real column and the real column prototype (i.e. Person1,person2, and Person)? A second attribute needs to be introduced

__proto__

This is an attribute that every real column object (except null) has called __proto__, pointing to the object’s prototype as shown in the following code

        function Person() {

        }
        var person1 = new Person()
        console.log( person1.__proto__ === Person.prototype); //true
Copy the code

So we have a diagram

Since both a real column object and a constructor can point to a stereotype, can a stereotype be a property that refers to a constructor or a real column object?

constructor

Pointing to a real column object is not there, but pointing to a constructor is there and that’s the constructor property. Look at the code

         function Person() {

        }
        var person1 = new Person()
       console.log( Person.prototype.constructor === Person); // true
Copy the code

Then you can follow the new picture:

That’s the relationship between constructors, instance stereotypes, and instances

Columns and prototypes

When an instance property is read, if it cannot be found, it looks for the property in the stereotype associated with the object. If not, it looks for the stereotype until it reaches the topmost level. Such as:

    function Person() {

    }
    Person.prototype.name = 'dada'
    var person = new Person()
    person.name = 'haha'
    console.log(person.name); //dada
    delete person.name
    console.log(person.name); //haha
Copy the code

In this example we add a name attribute to both the Person constructor’s prototype and the Person column object. When the first printout of person.name() is, It naturally prints’ dada ‘. Why would we print ‘haha’ when we delete the name property on a real column object? If it doesn’t, it looks for the name property in the Person prototype. In this example, it finds the name property in the Person prototype and prints “Haha”. But what if it doesn’t find it?

Prototype of prototype

In the previous section, we said that a prototype is also an object, and since it is an object, we can create it in the most primitive way, which is:

        var obj = new Object();
        obj.name = 'Kevin'
        console.log(obj.name) // Kevin
Copy the code

The diagram can then be updated again:

Finally, it can be understood more thoroughly with the following figure:

The above content can be found at github.com/mqyqingfeng…