JavaScript 세계의 모든 것의 탄생에 대한 자세한 소개

1. 무에서 유를 만들어 보세요

처음에는 아무것도 없었습니다.

창조자가 말씀하셨습니다: 아무것도 그 자체로 사물이 아니므로 아무것도 없습니다.

이제 우리는 무언가를 만들어야 합니다. 그런데 원자재가 없으면 어떻게 해야 할까요?

한 목소리: null이 아닌가요?

또 다른 목소리는 다음과 같습니다. 하지만 null은 아무 의미도 없습니다.

제작자께서 말씀하셨습니다. 그렇다면 무에서 유를 만들어보세요!

그래서

JavaScript에서는 1번 개체가 생성됩니다.

이 1위의 물체는 믿을 수 없을 만큼 놀랍습니다. 모든 것의 진정한 조상입니다. 모든 객체가 가지고 있는 속성을 가지고 있습니다.

__proto__란 무엇인가요? 이는 "출생" 또는 상속을 의미합니다.

2. 물건을 만드는 기계

이미 물건이 있으니 나머지는 다루기 쉽다. 하나가 둘이고, 둘이 셋이고, 셋이 전부이기 때문이다.

그런데 창조주가 너무 게으른 편이라 손으로 하나하나 물건을 만들고 싶어하지 않더라고요. 그래서 그는 물건을 만들 수 있는 기계를 만들었습니다.

그는 기계에 Object라는 이름을 붙였습니다.

이 기계는 허공에서 객체를 생성할 수 없습니다. 이 템플릿 객체에 따라 객체를 생성하려면 템플릿 객체가 필요합니다. 당연히 유일한 No.1 개체를 템플릿으로 사용합니다. 그림의 프로토타입은 기계의 템플릿 개체를 나타냅니다.

기계를 어떻게 시작하나요? 새로운 명령을 통해. 기계에 "new!"라고 외치면 객체가 생성됩니다.

기계의 출현으로 사물의 자동화된 일괄 생산이 가능해졌고, 창작자의 손이 자유로워졌습니다. 그런 다음 창조주께서는 다른 일을 하러 떠나셨습니다.

기계가 템플릿에 따라 똑같은 객체를 기계적으로 복사했다면 너무 어리석은 일입니다.

인간의 자손은 부모의 특성을 물려받은 것을 바탕으로 부모가 갖지 못한 특성을 발달시킬 수 있습니다. 마찬가지로, 기계가 객체를 제조할 때 템플릿 객체의 속성을 상속하는 것 외에도 새로운 속성을 추가할 수도 있습니다. 이로 인해 JavaScript 세계는 점점 더 다양해졌습니다.

예를 들어, 어느 날 개체 머신이 개체를 생성했는데, 여기에는 플래그라는 특수 속성이 있고 속성 값은 10입니다. 그래픽 표현은 다음과 같습니다.

코드로 작성:

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

활기찬 창조의 움직임이 시작되었습니다...

3 . 많은 물건을 만드는 기계 업데이트

날이 갈수록 창조주께서 작품을 점검하러 오셨습니다. 그는 Object가 많은 객체를 생성한 것을 보고 매우 기뻤습니다.

동시에 그는 "깃털의 새들이 함께 모인다"는 원리에 따라 이러한 물체가 여러 범주로 나눌 수 있다는 사실도 발견했습니다. 영리한 창조자는 기계를 몇 대 더 만들어 각 기계가 특정 유형의 물체를 제조하는 일을 담당하게 하면 어떨까라고 생각했습니다. 그래서 그는 여러 대의 기계를 만들고 이름을 붙였습니다.

문자열: 텍스트를 나타내는 개체를 만드는 데 사용됩니다.
숫자: 숫자를 나타내는 개체를 만드는 데 사용됩니다.
부울: 예와 아니오를 나타내는 객체를 만드는 데 사용됩니다.
배열: 순서가 지정된 대기열 개체를 만드는 데 사용됩니다.
날짜: 날짜를 나타내는 개체를 만드는 데 사용됩니다.
오류: 오류를 나타내는 개체를 만드는 데 사용됩니다.
...

많은 기계가 동시에 가동되어 각자의 임무를 수행하며 창작의 움직임은 새로운 단계에 들어섰다...

창작자가 시작했다 다시 생각해 보십시오. 기계는 물체를 제조하는 데 사용되지만 기계 자체는 실제로 특별한 물체입니다. 이제 기계가 너무 많기 때문에 그들의 공통된 특징을 요약하고 이를 객체 시스템에 통합해야 합니다.

그래서 창조자는 1번 객체를 바탕으로 2번 객체를 만들어 모든 기계의 공통적인 특성을 표현하기 위해 사용했습니다. 즉, 모든 기계의 프로토타입 객체로 사용합니다.

(참고: __proto__는 작성하기 너무 번거로우므로 나중에 대신 [p]를 사용하겠습니다.)

물론 Object와 마찬가지로 이러한 기계도 마찬가지입니다. 각각에는 템플릿 객체, 즉 프로토타입 속성이 가리키는 객체가 있어야 합니다. 분명히 템플릿 개체는 1위 개체, 즉

에서 상속되어야 합니다.

这张图显示了JavaScript世界中那些最基本的机器本身的原型链，以及它们的模板对象的原型链。不过看起来太复杂了，所以后面我们就不再把它们完整地画出来了。

四. 制造机器的机器

造物主高兴地想：这下可好了，我造出了Object机器，实现了对象制造的自动化。然后又造出了String、Number等机器，实现了特定类别的对象制造的自动化。但是，为啥总感觉似乎还缺点什么呢？

对啦，还缺少一台制造机器的机器啊！

很快，万能的造物主就把它造了出来，并把它命名为Function。有了Function机器后，就可以实现自动化地制造机器了。
让我们来观察一下Function：

首先，Function是一台机器，所以它的原型对象也是No. 2对象。
其次，Function又是一台制造机器的机器，所以它的模板对象也是No. 2对象。
所以我们得到了Function的一个非常特别的性质：

Function.__proto__ === Function.prototype

哇，太奇妙了！

不要奇怪，这个性质不过是”Function是一台制造机器的机器“这个事实的必然结果。

从这张图中，我们发现：所有的函数(包括Function)的原型都是No. 2对象，而同时Function.prototype也是No. 2对象。这说明了：

从逻辑上，我们可以认为所有机器(包括Function自己)都是由Function制造出来的。

同时，如果再仔细瞧瞧，你会发现：

Object作为一个机器可以看做是有由Function制造出来的，而Function作为一个对象可以看做是由Object制造出来的。

这就是JavaScript世界的“鸡生蛋，蛋生鸡”问题。那么到底是谁生了谁呢？Whatever！

五. 让世界动起来

就像前面所说，机器用来制造某一类对象。正因如此，机器可以作为这类对象的标志，即面向对象语言中类(class)的概念。所以机器又被称为构造函数。在ES6引入class关键字之前，我们常常把构造函数叫做类。

然而，除了作为构造函数来制造对象外，函数通常还有另一个功能：做一件事情。正是有了这个功能，JavaScript的世界才由静变动，变得生机勃勃。

比如说，我们现在用Function机器制造了鸟类(即用来造鸟的机器)：

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

然后，对着造鸟机说：“new！”，于是造鸟机发动起来，制造一个红色的鸟：

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

如果现在我们想让鸟飞起来，该怎么办呢？我们需要再次用Function制造出一台机器，不过这台机器不是用来制造对象的，而是用来做事儿的，即“让鸟飞起来”这件事情：

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

我们知道，让一台制造对象的机器发动，只需要对它喊“new”即可；那么怎样让一台做事情的机器发动呢？更简单，对它咳嗽一声就行了。咳咳咳，

makeBirdFly(redBird);

于是红鸟飞了起来，世界充满了生机。

从上面的Bird和makeBirdFly的定义可以看出：实际上，制造对象的机器和做事情的机器没什么明显区别，不同的只是它们的使用方式。在两种情况下，它们分别被叫做构造函数和普通函数。

说明1：function xxx语法可以看成new Function的等价形式。
说明2：用户自定义的函数通常既可以作为普通函数使用，又可以作为构造函数来制造对象。ES6新增的class语法定义的函数只能作为构造函数，ES6新增的=>语法定义的箭头函数只能作为普通函数。

六. 让世界立体起来

造物主对目前的世界还是不太满意，因为几乎所有的机器的模板对象都是No. 2，这使得JavaScript世界看起来有点扁。

于是造物主再次研究世界万物的分类问题。他发现有些对象会动、还会吃东西，于是把它们叫做动物，然后造了一台Animal机器来制造它们。他进一步发现，即使都是动物，也还是可以进一步分类，比如有些会飞、有些会游，他分别把它们叫做鸟类、鱼类。于是他想，我何不单独造几台机器，专门用来制造某一类动物呢。于是它造出了Bird、Fish等机器。

接下来，在选择这些机器的模板对象时碰到一个问题：如果还像之前那样直接复制一个No. 1对象作为Bird、Fish的模板，那么结果就是这样的：

这样可不好。首先没体现出鸟类、鱼类跟动物的关系，其次它们的模板对象存了重复的东西，这可是一种浪费啊。怎么办呢？简单，让Bird和Fish的模板对象继承自Animal的模板对象就好了。就是说

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

于是：

用同样的方法，造物主造出了一个立体得多的JavaScript世界。

然而这样还不够。虽然那些纯对象现在充满了层次感，但是那些机器对象之间的关系还是扁平的：

那又该怎么办呢？其实用类似的办法就行了：

为了更方便地做到这一点，造物主发明了class关键字。

七. 世界最终的样子

经过一番折腾，JavaScript世界发生了大变化。变得丰富多彩，同时变得很复杂。用一张图再也没法画出它的全貌，只能画出冰山一角：

JavaScript的世界还在不断进化中……

 以上就是JavaScript世界万物诞生记的详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！