(reproduced) JavaScript World birth of all things

I. Unfounded

At first, there was nothing.
The creator said: Nothing is a thing in itself, so there is null:

Now we're going to build something out. But what if there is no material?
There was a voice saying, "Isn't there a null?"
Another voice said: "But the null means nothing."
The creator said, "Let nothing be out of it!"
So:

The number 1th object in JavaScript was created, and we called it No. 1.
This No. 1 objects can be very serious, it is the true ancestor of all things. It possesses the nature and ability that all objects have.
What does __proto__ mean? That is the meaning of "life", or "inheritance".

Two. Machines for the manufacture of objects

Since there is an object, then the rest is good, because life two, two three, Sansheng everything.
But the creator was lazy, and he did not want to make the object by himself. So he created a machine capable of making objects:

He gave the machine a name: Object.
The machine does not make objects out of thin air, it needs a template object, which is the template object to manufacture the object. It is natural that it puts the only present in the No. 1 objects as templates. The prototype in the figure represents the machine's template object.

The machine is also called the constructor, why? Because it is used to construct objects.

How does the machine start? The answer is through the new command. You shout at the machine: "new! , the object was created.

The production of machines made the process of producing objects automated, freeing the creator's hands, and the creator was busy with other things.
It would be foolish to mechanically replicate the exact same object just as the template would look like.
The descendants of mankind inherit the traits of their fathers, and they can produce new traits that fathers did not have. Similarly, when a machine manufactures objects, it can add new properties in addition to inheriting the properties of the template object.

One day, for example, an object machine makes a particular property called Flag, which has a property value of 10. It looks like this:

Written code is:

var obj = new Object({ flag: 10 });

Three. More machines for manufacturing objects

As the day passed, the creator came to inspect the work and found that object made many many objects. He also noted that, according to the principle of "birds of a Feather", these objects can be divided into many classes. The wise creator thought, why don't I build more machines so that each machine is responsible for making one type of object? So he built several machines and gave them names, respectively:
String: Used to create an object that represents a piece of text.
Number: Used to create an object that represents a digit.
Boolean: Used to create objects that represent and are not.
Array: Used to create an ordered queue object.
Date: Used to create an object that represents a date.
Error: Used to create an object that represents an error.
A number of machines are running, each of which makes its own responsible object. The vigorous movement of creation began.

The creator began to think again, though the machine was used to make objects, but the machine itself was actually a special object. Now that there are so many machines, I have to summarize their common features and incorporate them into the object system.
So the creator is based on No. 1 objects, creating a No. 2 object, which is used to represent the common qualities of all machines. In other words, it is the prototype object for all machines.

(Note: __proto__ is too troublesome to write, we use [P] instead. )

Of course, like object, these machines also need to have a template object, which is the object that their prototype attribute points to. Obviously, their template object should be inherited in No. of 1 objects. That
This diagram shows the inheritance (__proto__) lines of the most basic machines themselves in the JavaScript world and the Inheritance (prototype) lines of their template objects. It just looks too complicated, so we don't draw any more of their prototype in the back.

Four. Machines for making machines

The creator thought: "Well, I've built an object machine that satisfies the automation of object manufacturing." Then, a string, number and other machines were created, which realized the automation of the specific class of object manufacturing. But, what seems to be the shortcomings of what AH?

By the right, there is still a machine to make machine! Soon the almighty creator made it and named it function. With the function machine, it is possible to automate the manufacture of machines.
First, function is also a machine, so its prototype object is No. 2 objects.
Second, function is a machine that makes machines, so its template object is No. 2 objects.
So we get a very special nature of the function:

Function.__proto__ === Function.prototype

Wow, this is amazing!

Don't be surprised, this property is a corollary of the fact that the function is a machine for making machines.
So the JavaScript world becomes this way: from this graph, we will find that all functions (including function) are __proto__ to No. 2 objects, while Function.prototype is No. 2 objects. This illustrates the following:

Logically, we can assume that all machines (including the function itself) are made from function.

At the same time, if you look closely, you will find:

Object as a machine can be seen as having been created by function, and function as an object can be seen as being produced by object.

This is the JavaScript world "chicken eggs, eggs and chickens" problem. So who was the one who gave birth? whatever!

Five. Make the world move

According to the above, the machine is used to make a certain kind of object. Because of this, machines can be used as a marker for such objects, i.e. the concept of class in object-oriented languages. At this point, the machine is called a constructor. So, before ES6 introduces the class keyword, we often call constructors a class.

However, in addition to making objects as constructors, functions are often used for another purpose: to do one thing. It is with this function that the JavaScript world is changed from static to dynamic.

For example, we are now using a function machine to make birds (that is, machines for making birds):

function Bird(color) { this.color = color; }

Then, to the bird-making machine, said: "New! So the bird-making machine started up and made a red bird:

var redBird = new Bird(‘#FF0000‘);

Now we want the bird to fly, so we use the function machine to make a machine. This machine is not used to make objects, but to do one thing, "Let the Birds Fly" this thing:

// 这是一台通过晃动鸟的翅膀，让鸟飞起来的简陋的机器。 function makeBirdFly(bird) { shakeBirdWing(bird); }

We know that by making a machine that makes objects, it just needs to shout "new", so how do you get a machine to do things? It's easier, just cough it up.

makeBirdFly(redBird);

So the red bird flew up and the world was full of life.

From the definition of bird and makebirdfly above, it can be seen that the machines that make objects and the machines that do things do not differ significantly, they are only used in different ways. In both cases, they are called constructors and normal functions, respectively.

Explanation 1:function XXX syntax can be considered as the equivalent form of new function.
Illustration 2: A user-defined function can often be used both as a normal function and as a constructor to make an object. ES6 the new class syntax defines a function that can only be used as a constructor, ES6 the new arrow function defined by the/= syntax can only be used as a normal function.

Six. Make the world look solid

The creator is not satisfied with the present world. Because almost all of the machine's template objects are no. 2, which makes the world look a bit flat.

So he began to study the classification of all things in the world. It found that some objects moved and ate, so he called them animals and made them out of machine animal. He further found that even animals can be further classified, such as some flying, some can swim, he called them birds, fish. So he thought, why don't I just build a few machines that are designed to make some kind of animal? So it made bird, fish and other machines.

Next, there is a problem when selecting template objects for these machines: if you copy a no directly as before. 1 objects as templates for bird and fish, the result is this:

This is not good. First of all, the relationship between birds, fish and animals is not reflected, and secondly, their template objects have duplicated things, which is a waste. What do we do? Quite simply, it would be nice to have bird and fish template objects inherit from the animal template object. That is

Bird.prototype.__proto__ === Animal.prototype Fish.prototype.__proto__ === Animal.prototype

So:

In the same way, the creator created a much more solid JavaScript world.

But it's not enough. Although the pure objects are now full of layering, the relationships between those machines are flat:

What do we do? In fact, in a similar way:

To do this, the creator invented the class keyword.

Seven. The world's final appearance

The world is now becoming more complex and can only draw part of it:

Article from: JavaScript World birth of Everything-dream KE education China professional IT career online education platform
Exchange Platform: Click the link to join the group "Javaweb Front-end Learning communication":https://jq.qq.com/? _WV=1027&K=45GINM5

(reproduced) JavaScript World birth of all things