A prototype,

In JavaScript, every function (whether function or constructor) has a prototype property that points to the function’s prototype object.

Such as:

function Person(sex) {
    this.sex = sex      
}
Person.prototype.name = 'zhangsan'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //zhangsan
console.log(person2.name)  //zhangsan
Copy the code

In the example above, the function’s prototype points to an object that is the prototype of the instance created when the constructor is called, namely person1 and person2.

The concept of stereotypes: Every javascript object (except null) created is associated with another object, which is called a stereotype, from which each object “inherits” properties.

Let’s use a diagram to show the relationship between constructors and instance stereotypes:

Second,__proto__

This is a property that every object (except null) has, called __proto__, which points to the prototype of that object.

function Person() {

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

The diagram is as follows:

Supplementary notes:

Most browsers support this nonstandard method access prototype, but it doesn’t exist in Person.prototype. In fact, it comes from Object.prototype, which is more of a getter/setter than an attribute. When using obj.__proto__, it is understood to return object.getProtoTypeof (obj).

Third, the constructor

Each stereotype has a constructor property that points to the association’s constructor.

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

Update diagram:

function Person() { } var person = new Person(); console.log(person.__proto__ == Person.prototype) // true console.log(Person.prototype.constructor == Person) // true // Get console.log(object.getProtoTypeof (person) === Person.prototype) // trueCopy the code

Supplementary notes:

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

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.

function Person() {

}

Person.prototype.name = 'lisi';

var person = new Person();

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

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

In this example, we add the name attribute to the instance object Person. When we print Person. name, the result will be Daisy.

But when we delete the person name attribute and read the Person. name, we can’t find the name attribute in the Person object and we get the name attribute from the person’s prototype, person.__proto__, In Person. Prototype, luckily we found the name property, which is Kevin.

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

The prototype of the 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 = 'zhangsan'
console.log(obj.name) // zhangsan
Copy the code

The __proto__ of the instance refers to the prototype constructor, so let’s update the diagram:

6. Prototype chain

A quick review of the relationship between constructors, stereotypes, and instances: Each constructor has a stereotype object, which contains a pointer to the constructor, and each instance contains an internal pointer to the stereotype object. So what if we made the prototype object equal to an instance of another type? Obviously, the stereotype object will contain a pointer to another stereotype, which in turn will contain a pointer to another constructor. If the other prototype is an instance of another type, the relationship still holds. In this way, a chain of examples and prototypes is formed. This is the basic concept of the so-called prototype chain. — From javascript Advanced Programming

In fact, in simple terms, it is the above four – five process.

What about the Object. Prototype?

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

Null means “no object”, meaning there should be no value.

Object.prototype.__proto__ = null; Object. Prototype has no prototype.

Object. Prototype = Object. Prototype = Object.

The last diagram can also be updated to read:

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