prototype

Each function has a prototype property, such as:

function Person(name) {
	this.name = name
}

Person.prototype.name = 'Coran'
const person1 = new Person()
const person2 = new Person()

console.log(person1.name) // Coran
console.log(person2.name) // Coran
Copy the code

The prototype property of the function points to an object that is the prototype of the instance created by calling the constructor; Person.prototype is the prototype for person1 and person2 in this example.

What is a prototype?

You can think of it this way: every JavaScript object (except null) is associated with another object when it is created, and this object is called a prototype, from which each object “inherits” properties

Person(constructor) => Person.prototype(instance prototype)

This is the relationship between the constructor and the instance stereotype

So how do we represent the relationship between instance and instance prototype, person and Person.prototype, which brings us to the second property: __proto__

__proto__

__proto__ is a property that every JavaScript object (except null) has that points to the object’s prototype.

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

Since both the instance object and the constructor can point to the stereotype, does the stereotype have properties that point to the constructor or the instance?

There is no archetypal-to-instance attribute, because a single constructor can generate multiple instances.

There are properties for stereotypes to point to constructors, which brings us to the third property: constructor.

constructor

Each stereotype has a constructor property pointing to the associated constructor.

function Person() {}console.log(Person === Person.prototype.constructor) // true
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.

Here’s an example:

function Person() {
  
}
Person.prototype.name = 'Kevin'

let person = new Person()

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

delete person.name
console.log(person.name) // Kevin
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__, That is, we looked in Person.prototype, and 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?

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:

let obj = new Object()
obj.name = 'Coran'
console.log(obj.name) // Coran
Copy the code

The prototype Object is actually generated by the Object constructor. As mentioned earlier, the __proto__ of the instance points to the prototype constructor.

How about the Object. Prototype?

The Object. Prototype prototype is null

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.

Prototype chain

The chain of linked prototypes shown in the image below is the prototype chain, the blue line. (Can be understood as a prototype chain linked by __proto__)

That is, the function’s prototype property points to the prototype, and the prototype chain is linked by __proto__

supplement

constructor

Here’s an example:

function Person() {}const 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 === Person
Copy the code

__proto__

With respect to __proto__, most browsers support this non-standard method of accessing prototypes, but it is not present in Person.prototype.

In fact, it comes from Object.prototype and is more of a getter/setter than a property.

When using obj.__proto__, it is understood to return object.getProtoTypeof (obj).

About the inheritance

In terms of inheritance, we said that “every object ‘inherits’ properties from its prototype.” In fact, inheritance is a very confusing term, to quote 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.