Interviewer: What is a prototype chain

preface

There are tons of articles about Javascript prototypes and prototype chains, but there are really very few that make sense to readers. As one of the most common interview questions, we all know the importance of prototypes and prototype chains. In order to understand the prototype and prototype chain, I have read a lot of articles before, online related high-quality articles are really very few, this article I will use my own understanding and combined with some great online articles to describe to you what the prototype and prototype chain is, package you understand the prototype and prototype chain!

What are prototypes and prototype chains?

When an interviewer asks this question, what should we say? Here’s a standard answer (in two paragraphs) :

In Javascript, constructors are used to create new objects. Each constructor has a prototype property value inside it. This property value is an object (also called a prototype object) that contains properties and methods shared by all instances created by the constructor. When we use the constructor to create a new object, the new object will have a pointer inside it. This pointer is called the prototype of the object. Normally we can’t get this pointer, but now we can use the __proto__ property in browsers to get this pointer.

When we access a property of an object, if that property doesn’t exist inside the object, then it will look for that property in its prototype object, and that prototype object will have its own prototype, and so on and so forth, the concept of prototype chain. Object. Prototype’s prototype points to null, so that’s why our new Object can use methods like toString(). Object. Prototype has a toString() method in it.

You look confused? That’s ok. Read the whole article and then come back here and read it again.

A picture is worth a thousand words (the following questions are analyzed based on this picture)

Note that there are three constructors in the figure: Foo, Object, and Function.

Let’s look down from the top:

First, the Foo constructor has a prototype property that points to an object (as mentioned earlier, the prototype object contains the prototype and method that creates the shared prototype for all instances). Notice that the prototype object also has a constructor that refers back to the function Foo. F1 and f2 are two objects, derived from Foo constructor new, and both have a __proto__ pointer (we call it a prototype) pointing to foo. prototype.

Try printing the following code on the console to verify that this is true:

function Foo(){}
Foo.prototype.a = 'b'
var f1 = new Foo()
var f2 = new Foo()
console.log(Foo.prototype)
console.log(Foo.prototype.constructor)
console.log(f1.__proto__)
console.log(f2.__proto__)
Copy the code

Note: Each constructor has this relationship to the object it creates (unless we manually modify their internal values), okay? You can read it several times if you don’t understand. (Look closely at the Foo, Object, and Function constructors in the figure as well.)

Foo. Prototype has a __proto__ pointer.

Prototype. Object. Prototype’s __proto__ is null, and the prototype chain ends.

Do you know javascript inheritance? Often used in combination inheritance and parasitic combination inheritance principle is actually to change the constructor of prototype chain to achieve inheritance, prototype chain changes, create instances of the attribute will change ah, so as to achieve inheritance. For those of you who don’t know much about inheritance, check out this article I wrote: Five Inheritance in javascript

How can the constructor Foo also have a __proto__ pointer?

Function is an object, the object will have __proto__ pointing to its prototype object, its constructor is function function (), it also has __proto__ pointing to function.prototype.

Add instanceOf principle

Will f1 instanceof Object be true

The instanceof principle is to see if Object. Prototype exists in the f1 prototype chain. We can start by looking for __proto__ from F1, if not, then return false. Of course Object. Prototype obviously exists in the f1 prototype chain, so return true.

The end

I think you’ve already figured out the prototype and the prototype chain. You are welcome to submit comments or questions or queries.

Writing is not easy, feel the article is also good can point a thumbs-up oh! Your support is the biggest motivation for my creation!

reference

In-depth understanding of javascript prototypes

Recommended reading

Prototype and prototype chain

Javascript goes from prototype to prototype chain