JavaScript two pictures to understand the prototype chain

Preface:

In our previous article, we introduced JavaScript prototypes. Why not introduce the prototype chain together? Because the prototype chain in JavaScript is a difficult point and a must-ask question in an interview, let’s learn it now.

1. Prototype Relationship

Every function in JavaScript has a prototype property, which returns a prototype, and the prototype has a constructor property, which points to the constructor function associated with it. An object instantiated by a constructor will have a __proto__ attribute, __proto__ points to the same memory as the prototype of the constructor.

It is worth noting that the __proto__ attribute has been deleted in the standard, Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype) are used here instead.

Now let's test the relationship between the Object constructor and the prototype. The sample code is as follows:

// First, Object is a constructor function, so it has a prototype property var result = Object.prototype
console.log(result) // Get a prototype object/*
 * The constructor property of the prototype object -> returns the constructor associated with it * Object.getPrototypeOf(result) returns the prototype pointing to the constructor
 */
var result2 = result.constructor
console.log(result2) // [Function: Object]
var result3 = Object.getPrototypeOf(result)
console.log(result3) // null

The diagram is shown below:

When we get the prototype of Object.prototype through Object.getPrototypeOf(Object.prototype) , the returned value is null, which means that we can stop searching after finding Object.prototype .

2. Prototype chain

To make it easier for us to understand what prototype chaining is, first take a look at the following code:

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

var PP = Person.prototype
var PPC = PP.constructor
// Verify that it is the same as the constructor console.log(PPC === Person) // true

// Instantiate Person
var person = new Person('Yiwan Zhou')
// Get the prototype of the instantiated Person object var pP = Object.getPrototypeOf(person)
// Verify that the prototype of the instantiated Person object points to the prototype of the constructor
console.log(pP === PP) // true

In fact, all constructors are inherited from Object by default, as tested in the following code:

// Get the prototype of Person.prototype var PPP = Object.getPrototypeOf(PP)
var OP = Object.prototype
// Check if the two are equal console.log(PPP === OP) // true

The code above is not very clear, so I drew a picture to help you understand it:

The red line in the above picture is the prototype chain. The prototype chain points to the relationship in the prototype until the final result is null, which is Object.prototype . The prototype chain ends, which means that **Object.prototype** is the end point in the prototype chain.

We can use Object.setPrototypeOf(obj, prototype) method to set the prototype chain of specific content, but it is not recommended to do so if it is not necessary, because it is very performance-intensive.

3. Conclusion

Two pictures are used to explain the relationship between prototypes in JavaScript and what the prototype chain is. Finally, the end point of the prototype chain is introduced.

This concludes this article about understanding the prototype chain in JavaScript with two pictures. For more information about the JavaScript prototype chain, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!