JavaScript prototype and prototype chain details

Preface:

JavaScript is often described as a "prototype-based language" - each object has a "prototype object", the object uses its prototype as a template, and inherits properties and methods from the prototype. Prototype objects may also have prototypes, from which they inherit properties and methods, and so on. This relationship is often called the "prototype chain", and it explains why one object has properties and methods defined in other objects.

To be precise, these properties and methods are defined on prototype property of Object constructor, not on the object instance itself.

Four sentences reveal the prototype and prototype chain:

• Each function (class) is born with a property prototype , the property value is an object that stores the properties and methods of the current class for instance use (show prototype)
• In the heap memory that the browser opens up by default for the prototype, there is a constructor property: it stores the current class itself (⚠️Note: there is no constructor property by default in the heap memory that you open up yourself, you need to add it manually) "(Constructor)"
• Every object has a __proto__ property, which points to the prototype of the class to which the current instance belongs (if the class is not determined, it points to Object.prototype ) (implicit prototype)
• When you try to get a property of an object, if the object itself does not have this property, it will look for it in its implicit prototype __proto__ (that is, the display prototype prototype of its constructor). 「(Prototype chain)」
  

The relationship between constructor, prototype and instance:

Each constructor has a prototype object, which contains a pointer to prototype constructor , and each instance contains an internal pointer to the prototype object （__proto__)

1. prototype (explicit prototype)

Every function has a prototype property

// Constructor (class)
function Person(name){
    this.name = name
}
// New an instance (object)
var person = new Person('南玖')
console.log(person) //Person { name: '南玖' }
console.log(Person.prototype) //Prototype of the constructor function (class)----->object Person.prototype.age = 18 // Constructor function prototype console.log(person.age) // 18

Above we printed out the prototype of this function Person , which points to an object, and this object is the prototype of the instance created by calling the constructor

The above picture shows the relationship between the constructor and the instance prototype, so we know that the prototype property of the constructor points to an object.

What is the relationship between an instance and its prototype? Here we need to mention the __proto__ attribute

2. __proto__ (implicit prototype)

From the above four sentences, we can know that this is a property that every Javascript object (except null) has. This property points to the prototype of the object (that is, the instance prototype)

Because there is no concept of class in JavaScript , in order to implement a method similar to inheritance, objects and prototypes are linked together through __proto__ to form a prototype chain, so that objects can access properties that do not belong to them.

Then we can prove the relationship between the instance and the instance prototype

console.log(person.__proto__) //Instance (object) prototype ---> object console.log(person.__proto__ === Person.prototype) //The prototype of the instance is equal to the prototype of the constructor function

From the above figure we can see that both instance objects and constructors can point to prototypes, so can prototypes point to constructors or instances?

3. Constructor

The prototype has no attributes pointing to the instance, because a constructor can create multiple instance objects;

From the previous four sentences, we know that "there is a constructor property in the heap memory allocated by the browser for the prototype by default", so the prototype can also point to the constructor function. This property is " constructor "

So we can prove the point:

console.log(Person.prototype.constructor) // Constructor of the explicit prototype of the instance ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor) //Instance's implicit prototype constructor ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor === Person.prototype.constructor) //true The constructor of the instance prototype is equal to the constructor of the class console.log(Person === Person.prototype.constructor) //true

How is __proto__ of an instance object generated?
We know that when we use the new operator, the generated instance object has a __proto__ attribute

function Foo() {}
// This function is an instance object of Function // function is a syntax sugar // It actually calls new Function() internally

So it can be said that in the new process, the new object is added with the __proto__ attribute and linked to the prototype of the constructor.

4. The principle of new

To put it simply, it can be divided into the following four steps:

• Create a new empty object
• Link Prototype
• Bind this and execute the constructor
• Returns the new object
  

function myNew() {
// 1. Create a new empty object let obj = {}
// 2. Get the constructor let con = arguments.__proto__.constructor
// 3. Link prototype obj.__proto__ = con.prototype
// 4. Bind this and execute the constructor let res = con.apply(obj, arguments)
// 5. Return a new object return typeof res === 'object' ? res : obj
}

5. Prototype chain

After talking about prototypes, let's take a look at what is the prototype chain? Let’s take a look at a picture first:

In this picture, the chain relationship connected by __proto__ is called the prototype chain

5.1 The role of the prototype chain

The prototype chain determines how inheritance is implemented in JavaScript . When we access a property, its lookup mechanism is as follows:

• Access the instance attributes of the object. If there are any, return them directly. If not, search for them on the prototype object through __proto__
• If it can be found on the prototype object, it will be returned. If it cannot be found, it will continue to search through the prototype object's __proto__
• Keep searching until you find Object.prototype. If you can find it, return it. If you can't find it, return undefined . Don't search any further because Object.prototype.__proto__ is null, which means Object is the top of the prototype chain of all objects.

From the figure we can see that all objects can eventually find Object.prototype through the prototype chain. Although Object.prototype is also an object, this object is not created by Object, but the engine itself creates Object.prototype. So it can be said that all instances are objects, but not all objects are instances.

5.2 What is the __proto__ of a constructor?

From the explanation of the prototype chain above, we should be able to understand __proto__ of the constructor function. In JavaScript , everything is an object, so the constructor function must also be an object, and an object has __proto__ .

function Person(){}
console.log(Person.__proto__)
console.log(Function.prototype)
console.log(Person.__proto__===Function.prototype) // true

"This also shows that all functions are instances of Function"

If we understand it this way, then Function.__proto__ is equal to Function.prototype。。。。 Let’s print it out and see

Function.__proto__ === Function.prototype // true

This is exactly what it prints out. Is Function.prototype also generated by new Function() ?

The answer is no, this function is also created by the engine itself. First the engine creates Object.prototype, then creates Function.prototype, and connects the two through __proto__. This also explains the above question very well, why let fun = Function.prototype.bind() has no prototype property. Because Function.prototype is an object created by the engine, the engine believes that there is no need to add a prototype property to this object.

6. Summary

• Object is the father of all objects. All objects can find it through __proto__
• Function is the father of all functions. All functions can find it through __proto__
• Function.prototype and Object.prototype are two special objects that are created by the engine.
• Except for the above two special objects, other objects are created through the constructor.
• prototype of a function is an object, that is, a prototype
• The object's __proto__ points to the prototype. __proto__ connects the object and the prototype to form a prototype chain.

This is the end of this article about the details of JavaScript prototype and prototype chain. For more relevant JavaScript prototype and prototype chain content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!