Prototype chain js is the most basic problem, but for a long time I sometimes confused, in order to be able to quickly recall next time, feature this article to strengthen memory!

A quick look at constructors

function Person() {
    // I am a constructor
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
Copy the code

At this point, we have created a simple constructor, Person

We also create an instance object, person, using new

That’s easy, isn’t it? Let’s get down to business!

The prototype property

First, let’s be clear: every function has a Prototype property, and the Prototype property is a function property

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

What does the prototype of the constructor Person point to?

Prototype refers to an object that is the prototype of the instance that calls the constructor Person.

In other words, the prototype of the constructor Person points to the prototype of the instance person1, person2.

Use a diagram to show the relationship between the constructor and the instance stereotype:

In this diagram we use Object.prototype to represent the prototype of the instance

So how do we represent the relationship between instance (person1) and instance prototype (Person.prototype)? This brings us to the second property

__ proto __

First, to be clear: every object in JS (except null) has a __proto__ attribute, which points to the object’s prototype. As follows:

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

So let’s update the diagram:

You can see that both the constructor and the instance object can point to the instance stereotype. Is there a property that points to the constructor and the instance object?

constructor

There are no attributes pointing to instance objects, because a constructor can have many instances. But! There are prototypes pointing to constructors! Which brings us to the third property:

To be clear, each stereotype has a constructor attribute pointing to the corresponding constructor

function Person() {}console.log(Person === Person.prototype.constructor); // true
Copy the code

So update the diagram:

Now that we know the relationship between constructors, instance stereotypes, and instances, let’s talk about the relationship between instance and stereotype:

Examples 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.

For example

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin
Copy the code

When we access the name attribute of the instance person, we successfully find Person. name as Daisy. However, when we delete the name attribute of Person, the name attribute cannot be found in the Person object, so we will access the person instance’s __proto__ (person. prototype) and find Kevin successfully.

But what if they haven’t found it yet? What is the archetype of the archetype?

Prototype of prototype

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(a); obj.name ='Kevin'
console.log(obj.name) // Kevin
Copy the code

The prototype Object (__ proto __) is generated by the Object constructor. The proto of the instance refers to the prototype constructor.

Prototype chain

How about the Object. Prototype?

console.log(Object.prototype.__proto__ === null) // true
Copy the code

Object. Prototype. If proto is null, Object. Prototype has no prototype.

Object. Prototype = Object. Prototype = Object.

Final diagram:

The chain of linked prototypes is the prototype chain, the blue line.

supplement

constructor

function Person() {}var person = new Person();
console.log(person.constructor === Person); // true
Copy the code

The constructor property is not available when the person. Constructor property is fetched from the person’s prototype. This property happens to be in the prototype, so:

person.constructor === Person.prototype.constructor
Copy the code

Is it really inheritance?

Finally, inheritance. Earlier we said that “every object ‘inherits’ properties from its prototype.” In fact, inheritance is a very confusing term, to quote from JavaScript you Don’t Know:

Inheritance means copying operations, but JavaScript by default does not copy the properties of an object. Instead, JavaScript simply creates an association between two objects so that one object can access the properties and functions of the other through delegation, so it is more accurate to call it delegation than inheritance.