preface

Archetypal inheritance relationship has always been a complicated point, but it was only after reading JavaScript you Don’t Know that I suddenly became aware of it, and then combining with the community materials to further expand, I finally learned this knowledge. Now let’s take a closer look at the relationship between archetypal inheritance.

Look at the picture resolution

The diagram below, which is no doubt familiar to most of you, is a relationship between archetypal inheritance that has been widely circulated in the community. The painting is also very good, but if you know it directly for the first time, then you must be ignorant, only you have a certain understanding of the prototype can really understand what it expresses.

As a whole, I don’t know how to start. Now let’s break it down step by step.

1. The built-in constructor function Object

Let’s start with the most familiar method of creating an Object. First, you need to understand that creating an Object is created either as a literal or by instantiating the Object constructor. In essence, literals are created from the Object constructor. So let’s get straight to the process of instantiating the Object constructor to create an Object.

Var obj1 = {} var obj2 = new Object()Copy the code

When we execute var obj2 = new Object(), we do the following

// Copy the constructor's prototype to the __proto__ obj2.__proto__ = object.prototypeCopy the code

Prototype: o1,o2: o1,o2: o1,o2: o1,o2: o1,o2: o1,o2: o1,o2: o1,o2: o1, O2: o1, O2: o1, O2: o1, O2: o1, O2: o1, O2: o1, O2: o1 Object. Prototype’s constructor points to its own constructor, Object. If Object. Prototype is a prototype Object, then it is an Object. If Object has a __proto__, then who does __proto__ point to? It points to null. Why is that? Because it is the top level, the origin of all objects comes from it, and there are no archetypes above it.

2. Self-defined constructor function Foo

It’s very similar to this

Var fn = new Foo() var fn = new Foo() var fn = new Foo() var fn = new Foo() var fn = new Foo() var fn = new Foo(Copy the code

So in the figure above, the __proto__ of f1 and f2 objects points to Foo. Prototype and constructor points to the same. Foo. Prototype’s __proto__. Where does it point to? The first thing to understand is that functions are both functions and objects. __proto__ for objects (“Foo’s __proto__” will be explored later), and prototype for functions. Foo. Prototype how did it come about? When this function is created, a property called prototype is created inside the function. Its value is an Object. Since the value is an Object, it must be created internally by instantiating the Object constructor.

Prototype = new Object() // foo.prototype.__proto__ = object.prototypeCopy the code

That corresponds to figure 1 above, so it definitely points to Object.prototype.

Function function ()

We can create functions by using constructors, just like we create objects.

Var fn = new Function()Copy the code

Function prototype and constructor refer to each other in the same way. Prototype: Foo. Prototype: Foo. Prototype: Foo.

4. The __proto__ reference to the constructor itself

If you are careful, you will notice that we have not yet explained the __proto__ line of the Foo Object function’s three constructors.

  1. Foo’s __proto__ –> function.prototype

Let’s start with the Foo function and look at the following code

Function Foo (){} // Foo = new function () // Foo.__proto__ = function.prototypeCopy the code

What do we see? The constructor is called to create! Foo’s __proto__ points to –> function.prototype

  1. __proto__ –> Function. Prototype

In the same way as follows

Function Object (){} function Object = new function (){//Copy the code
  1. Function. __proto__ –> Function. Prototype

This looks a little strange, this is also a special one, equivalent to Function. __proto__ === function. prototype although it does something inside, but we can understand it this way

Function() {// function = new function (){// function.__proto__ = Function.prototypeCopy the code

That makes sense!

End

Now let’s go back and see if this picture is very clear, right? If it helps you, click like favorites and follow! If have mistake, hope everybody big guy correct!