JavaScript の世界におけるすべての誕生についての詳細な紹介-jsチュートリアル-php.cn

1. 何もないところから何かを生み出す

最初は何もありませんでした。

創造主は言いました: 何もそれ自体が物ではないので、ヌルが存在します:

今、私たちは何かを作成しなければなりません。しかし、原材料がない場合はどうすればよいでしょうか？

「ヌルじゃないの？」という声が聞こえた。

別の声は次のように言いました: しかし、null は何も意味しません。

創造主は言いました: なら、何もないところから何かを作りましょう!

つまり:

JavaScript のオブジェクト No. 1 が生成されます。これを No. 1 と呼んでもいいでしょう。

この1号物体はすごいです、万物の真の祖先です。すべてのオブジェクトが持つプロパティを持っています。

__proto__とは何ですか?それは「誕生」または相続を意味します。

2. オブジェクトを作成する機械

オブジェクトがすでにあるので、残りは簡単に処理できます。1 つは 2、2 は 3、そして 3 がすべてだからです。

しかし、創造主はとても怠け者で、自分の手で物を一つ一つ作りたくないのです。そこで彼はオブジェクトを作成できるマシンを作りました:

彼はそのマシンに Object という名前を付けました。

このマシンは何もないところからオブジェクトを作成することはできません。このテンプレートオブジェクトに従ってオブジェクトを作成するには、テンプレートオブジェクトが必要です。当然、唯一のNo.1オブジェクトをテンプレートとして使用します。写真のプロトタイプは、マシンのテンプレートオブジェクトを表します。

マシンを起動するにはどうすればよいですか?新しいコマンドを通じて。マシンに向かって「新しい!」と叫ぶと、オブジェクトが作成されます。

機械の出現により、オブジェクトの自動バッチ生産が可能になり、創造主の手を解放しました。それから創造主は他のことをしに行きました。

機械がテンプレートに従ってまったく同じオブジェクトを機械的にコピーするだけなら、あまりにも愚かです。

親の形質を受け継いだことに基づいて、人間の子孫は親にはない形質を発達させることができます。同様に、マシンがオブジェクトを製造する場合、テンプレートオブジェクトのプロパティを継承するだけでなく、新しいプロパティを追加することもできます。これにより、JavaScript の世界はますます多様化します。

たとえば、ある日、オブジェクトマシンはフラグと呼ばれる特別な属性を持ち、その属性値は 10 でした。グラフィック表現は次のとおりです:

コードで書くと次のようになります:

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

ログイン後にコピー

創造の精力的な動きが始まりました...

3. 物体を製造するための機械が日に日に増えていきました

仕事を検査する。彼は、Object が多くのオブジェクトを作成したことを見て非常に喜んでいました。

同時に、「羽の鳥が群れをなす」という原理に従って、これらの物体が多くのカテゴリに分類できることも発見しました。賢い作成者は、さらにいくつかのマシンを構築して、各マシンに特定の種類のオブジェクトの製造を担当させてみてはどうだろうかと考えました。そこで彼はいくつかの機械を作り、それらに名前を付けました。

文字列: テキストの一部を表すオブジェクトの作成に使用されます。
数値: 数値を表すオブジェクトを作成するために使用されます。
ブール値: 善悪を表すオブジェクトを作成するために使用されます。
配列: 順序付けされたキューオブジェクトの作成に使用されます。
日付: 日付を表すオブジェクトの作成に使用されます。
Error: エラーを表すオブジェクトを作成するために使用されます。
...

複数の機械が連携し始め、それぞれが独自の役割を果たし、創造運動は新たな段階に入りました...

創造者は再び考え始めました：機械は物体を作るために使用されますが、機械自体はは実際には特別なオブジェクトです。マシンの数が非常に多くなったので、それらの共通の特徴をまとめてオブジェクトシステムに組み込む必要があります。

そこで、作成者は、No. 1 のオブジェクトに基づいて No. 2 のオブジェクトを作成し、それを使用してすべてのマシンの共通の特性を表現しました。つまり、すべてのマシンのプロトタイプオブジェクトとして使用します。

(注: __proto__ は書くのが面倒なので、後ほど代わりに [p] を使用します)

もちろん、Object と同様に、これらのマシンもそれぞれテンプレートオブジェクト、つまりプロトタイプ属性を持つ必要があります。指すオブジェクト。明らかに、テンプレートオブジェクトは No. 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(&#39;#FF0000&#39;);

ログイン後にコピー

如果现在我们想让鸟飞起来，该怎么办呢？我们需要再次用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中文网（m.sbmmt.com）！