Understanding of javaScript prototype chains

Let's take a look at functions before we talk about prototypes.

In JS, the essence of a function is an object, which, unlike other objects, creates its constructor differently than the constructor that creates other objects. S o what is the constructor that produces the function object? is a special function called Fusion, and the object generated by new Function is a function.

function f1() {}
//上面的函数等同于：
var f1 = new Function();

function sum(a, b) {
    return a + b;
}
//上面的函数等同于：
var sum = new Function("a", "b", "return a + b");//前面的是函数形参名，最后一个参数是函数体

That is, as long as the object created through Fusion is a function, the function is created through Fusion.

Look at this picture below:

As we can see above, normal objects are created by functions, which are created by Fusion. S o we're going to have a question about where Fusion came from. In fact, Fusion is not obtained through other functions, it is the JS execution engine initialization is placed directly into memory through local code.

When a function is created, it is automatically accompanied by a property prototype, which is an Object object that represents the prototype of the function. That is, prototype is the prototype object

The prototype object contains two properties: constructor and __proto__. T he constructor property refers to the function that created the prototype, which points to the function itself. So there's the following relationship:

Look at this piece of code:

var Person = function () { };
var p = new Person();    

Let's see what this new does.

Let's split the new process into three steps:

1. var p={}; That is, initialize an object p.

2. p.__proto__=Person.prototype;

3. Person.call(p); This means constructing p, which can also be called initialization p.

Let's prove it:

var Person = function () { };
var p = new Person();
alert(p.__proto__ === Person.prototype); // true

This code returns true. Explain that step 2 is correct.

So what__proto__s this?

Each object initializes a property inside it, __proto__, and when we access an object's property, if it doesn't exist inside the object, he'll look for it in __proto__, and the __proto__ will have its own __proto__, so we'll keep looking for it, which is what we usually call the concept of a prototype chain.

By standard, __proto__ is not public, which means it's a private property, but Firefox's engine exposes him as a common attribute that we can access and set up externally.

Let's take a look at the following code:

var Person = function () { };
    Person.prototype.Say = function () {
    alert("Person say");
}
var p = new Person();
p.Say();

Let's see why p can access Say for Person.

First of all, var p-new Person ();

You can p.__proto__ the s.person.prototype. S o when we call p.Say(), first there's no Say property in p, so he needs to go to his __proto__, which is Person.prototype, and we define Person.prototype.Say function() above; So I found this method.

Well, next, let's look at a more complicated one.

Let's do this:

Var p-new Programmer() can p.__proto__ -Programmer.prototype;

We've designated Programmer.prototype.new Person(); L et's split like this, var p1 s new Person(); P rogrammer.prototype=p1; So:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

From the above, p.__proto__ is programmer.prototype. You can p.__proto__ a photo of the person.prototype.

Okay, let's see the results above, p.Say(). Since p doesn't have Say, go to p.__proto__, which is Programmer.prototype, or p1, and since there's no Say in p1, go to p.__proto__. . . proto, which is, Person.prototype, and find a way to find aert.

The rest is the same.

This is also the implementation principle of the prototype chain.

Finally, in fact, prototype is just an illusion, he only played a supporting role in the implementation of the prototype chain, in other words, he just has a certain value in the new time, and the essence of the prototype chain, in fact, lies in __proto__!