The birth of everything in JavaScript world

Source: Internet
Author: User
Tags traits

Manxisuo
Links: https://zhuanlan.zhihu.com/p/22989691
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

First of all, nothing at all.
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 has been created, so call it No. 1.
This No. 1 objects can be incredibly, it is the true ancestor of all things. It possesses the nature of all objects that are there.
What is __proto__? is the meaning of "life", or it is called inheritance .

Two. Machines for the manufacture of objects

Now that there is an object, 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 made 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 .

How does the machine start? Through the new command. You shout at the machine: "new! , the object was created.

The production of the machine, the realization of the bulk of the object of automated manufacturing, the liberation of the creator's hands. So the creator was busy doing something else.
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 traits that their 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. This makes the JavaScript world more and more diverse.

One day, for example, an object machine makes a particular property called Flag, which has a property value of 10. The graphic representation is this:

Written code is:

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

The vigorous movement of creation began ...

Three. More machines for manufacturing objects

Day by day, the creator came to inspect the work. He was delighted to see that object made a lot of objects.
He also found that, according to the principle of "flock together", these objects can be divided into many classes . The wise creator thought, why don't I build more machines so that each machine is dedicated to making a class of objects? So he made a few machines and gave them names. Each of them is:

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, the division of the responsibility, the creation movement into a new stage ...


The creator began to think again: Although the machine is used to make objects, the machine itself is 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 characteristics of all machines. In other words, use it as a prototype object for all machines.


(Note: __proto__ is too troublesome to write, we use [P] to replace it later)

Of course, like object, these machines also need to have a template object, which is the object that their prototype attribute points to. It is obvious that their template object should be inherited from No. 1 of objects, i.e.

This diagram shows the prototype chains of the most basic machines themselves in the JavaScript world, as well as the prototype chains of their template objects. But it looks too complicated, so we don't draw them all in the back.

Four. Machines for making machines

The creator was pleased to think: "This is good, I built an object machine, the realization of 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 why does the total feeling seem to have shortcomings?

Yes, there is also a machine for manufacturing machines !

Soon the almighty creator made it and named it Function. With the function machine, it is possible to automate the manufacture of machines.


Let's take a look at the function:
First, the function is 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 the following:

From this picture, we find that all functions (including function) are prototypes of 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

As I said before, machines are 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. So the machine is also called the constructor function . Before ES6 introduced the class keyword, we often called constructors a class.

However, in addition to making objects as constructors, functions often have another function: 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‘);

What if we want to let the birds fly now? We need to use function again to make a machine, but this machine is not used to make objects, but to do things, that is, "Let the Birds fly up" 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. Cough cough,

makeBirdFly(redBird);

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

As can be seen from the definition of bird and makebirdfly above: In fact, the machines that make objects and the machines that do things do not differ significantly, only the way they are used. 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 still not satisfied with the present world, because almost all of the machine's template objects are no. 2, which makes the JavaScript world look a bit flat.

So the creator once again studies the classification of all things in the world. He found that some objects moved and ate, so they called them animals and built a animal machine to make them. 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, secondly, their template objects have duplicated things, which is a waste. What do we do? Simply, it would be nice to have bird and fish template objects inherit from the animal template object. So

Bird.prototype.__proto__ === Animal.prototypeFish.prototype.__proto__ === Animal.prototype

So:

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

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

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

To do this more conveniently, the creator invented the class keyword.

Seven. The world's final appearance

After some tossing, the JavaScript world has changed a lot. Become colorful and complex at the same time. With a picture you can no longer draw the whole picture, only the tip of the iceberg:

The world of JavaScript is still evolving ...

The birth of everything in JavaScript world

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.