如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一. 無(wú)中生有

起初，什么都沒(méi)有。

 

造物主說(shuō)：沒(méi)有東西本身也是一種東西啊，于是就有了null：

現(xiàn)在我們要造點(diǎn)兒東西出來(lái)。但是沒(méi)有原料怎么辦？

有一個(gè)聲音說(shuō)：不是有null嘛？

另一個(gè)聲音說(shuō)：可是null代表無(wú)啊。

造物主說(shuō)：那就無(wú)中生有吧！

于是：

 

JavaScript中的1號(hào)對(duì)象產(chǎn)生了，不妨把它叫做No. 1。

這個(gè)No. 1對(duì)象可不得了，它是真正的萬(wàn)物始祖。它擁有的性質(zhì)，是所有的對(duì)象都有的。

__proto__是什么呢？是“生”的意思，或者叫做繼承。

二. 制造對(duì)象的機(jī)器

既然已經(jīng)有了一個(gè)對(duì)象，剩下就好辦了，因?yàn)橐簧?，三生萬(wàn)物嘛。

不過(guò)造物主很懶，他不想一個(gè)一個(gè)地親手制造對(duì)象。于是他做了一臺(tái)能夠制造對(duì)象的機(jī)器：

 

他給這臺(tái)機(jī)器起了一個(gè)名字：Object。

這臺(tái)機(jī)器并不能憑空造出對(duì)象，它需要一個(gè)模板對(duì)象，按照這個(gè)模板對(duì)象來(lái)制造對(duì)象。很自然的，它把目前僅有的No. 1對(duì)象作為模板。圖中的prototype就代表機(jī)器的模板對(duì)象。

機(jī)器如何啟動(dòng)呢？通過(guò)new命令。你對(duì)著機(jī)器喊一聲：“new！”，對(duì)象就造出來(lái)了。

機(jī)器的產(chǎn)生，實(shí)現(xiàn)了對(duì)象的批量化自動(dòng)化生產(chǎn)，解放了造物主的雙手。于是造物主忙別的去了。

如果機(jī)器只是按照模板的樣子，機(jī)械地復(fù)制出一模一樣的對(duì)象，那就太笨了。

人類(lèi)的后代在繼承了父輩的性狀的基礎(chǔ)上，可以產(chǎn)生父輩沒(méi)有的性狀。同樣地，機(jī)器在制造對(duì)象時(shí)，除了繼承模板對(duì)象的屬性外，還可以添加新的屬性。這使得JavaScript世界越來(lái)越多樣化。

比如說(shuō)，有一天Object機(jī)器制造一個(gè)對(duì)象，它有一個(gè)特殊的屬性，叫做flag，屬性值是10。用圖形表示是這樣的：

 

寫(xiě)成代碼就是：

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

轟轟烈烈的造物運(yùn)動(dòng)開(kāi)始了……

三. 更多制造對(duì)象的機(jī)器

一天天過(guò)去了，造物主來(lái)視察工作?？吹絆bject制造出了好多好多對(duì)象，他非常高興。

同時(shí)他還發(fā)現(xiàn)：根據(jù)“物以類(lèi)聚”的原則，這些對(duì)象可以分成很多類(lèi)。聰明的造物主想，我何不多造幾臺(tái)機(jī)器，讓每一臺(tái)機(jī)器專(zhuān)門(mén)負(fù)責(zé)制造某一類(lèi)對(duì)象呢？于是，他動(dòng)手造出了幾臺(tái)機(jī)器并給它們起了名字。它們分別是：

String：用來(lái)制造表示一段文本的對(duì)象。
Number：用來(lái)制造表示一個(gè)數(shù)字的對(duì)象。
Boolean：用來(lái)制造表示是與非的對(duì)象。
Array：用來(lái)制造有序隊(duì)列對(duì)象。
Date：用來(lái)制造表示一個(gè)日期的對(duì)象。
Error：用來(lái)制造表示一個(gè)錯(cuò)誤的對(duì)象。
……

多臺(tái)機(jī)器齊開(kāi)動(dòng)，各司其責(zé)，造物運(yùn)動(dòng)進(jìn)入了一個(gè)新的階段……

造物主又開(kāi)始思考了：雖然機(jī)器是用來(lái)制造對(duì)象的，但是機(jī)器本身實(shí)際上也是一種特殊對(duì)象啊?，F(xiàn)在有了這么多機(jī)器，我得好好總結(jié)一下它們的共同特征，把它們也納入對(duì)象體系。

于是，造物主基于No. 1對(duì)象，造出了一個(gè)No. 2對(duì)象，用它來(lái)表示所有機(jī)器的共同特征。換句話說(shuō)，把它作為所有機(jī)器的原型對(duì)象。

 

（注：__proto__寫(xiě)起來(lái)太麻煩了，后面我們用[p]來(lái)代替）

當(dāng)然了，和Object一樣，這些機(jī)器也需要各自有一個(gè)模板對(duì)象，也就是它們的prototype屬性指向的那個(gè)對(duì)象。顯然它們的模板對(duì)象應(yīng)該是繼承自No. 1對(duì)象的，即

 

這張圖顯示了JavaScript世界中那些最基本的機(jī)器本身的原型鏈，以及它們的模板對(duì)象的原型鏈。不過(guò)看起來(lái)太復(fù)雜了，所以后面我們就不再把它們完整地畫(huà)出來(lái)了。

四. 制造機(jī)器的機(jī)器

造物主高興地想：這下可好了，我造出了Object機(jī)器，實(shí)現(xiàn)了對(duì)象制造的自動(dòng)化。然后又造出了String、Number等機(jī)器，實(shí)現(xiàn)了特定類(lèi)別的對(duì)象制造的自動(dòng)化。但是，為啥總感覺(jué)似乎還缺點(diǎn)什么呢？

對(duì)啦，還缺少一臺(tái)制造機(jī)器的機(jī)器??！

很快，萬(wàn)能的造物主就把它造了出來(lái)，并把它命名為Function。有了Function機(jī)器后，就可以實(shí)現(xiàn)自動(dòng)化地制造機(jī)器了。
讓我們來(lái)觀察一下Function：

首先，F(xiàn)unction是一臺(tái)機(jī)器，所以它的原型對(duì)象也是No. 2對(duì)象。
其次，F(xiàn)unction又是一臺(tái)制造機(jī)器的機(jī)器，所以它的模板對(duì)象也是No. 2對(duì)象。
所以我們得到了Function的一個(gè)非常特別的性質(zhì)：

Function.__proto__ === Function.prototype

哇，太奇妙了！

不要奇怪，這個(gè)性質(zhì)不過(guò)是”Function是一臺(tái)制造機(jī)器的機(jī)器“這個(gè)事實(shí)的必然結(jié)果。

 

從這張圖中，我們發(fā)現(xiàn)：所有的函數(shù)(包括Function)的原型都是No. 2對(duì)象，而同時(shí)Function.prototype也是No. 2對(duì)象。這說(shuō)明了：

從邏輯上，我們可以認(rèn)為所有機(jī)器(包括Function自己)都是由Function制造出來(lái)的。

同時(shí)，如果再仔細(xì)瞧瞧，你會(huì)發(fā)現(xiàn)：

Object作為一個(gè)機(jī)器可以看做是有由Function制造出來(lái)的，而Function作為一個(gè)對(duì)象可以看做是由Object制造出來(lái)的。

這就是JavaScript世界的“雞生蛋，蛋生雞”問(wèn)題。那么到底是誰(shuí)生了誰(shuí)呢？Whatever！

五. 讓世界動(dòng)起來(lái)

就像前面所說(shuō)，機(jī)器用來(lái)制造某一類(lèi)對(duì)象。正因如此，機(jī)器可以作為這類(lèi)對(duì)象的標(biāo)志，即面向?qū)ο笳Z(yǔ)言中類(lèi)(class)的概念。所以機(jī)器又被稱(chēng)為構(gòu)造函數(shù)。在ES6引入class關(guān)鍵字之前，我們常常把構(gòu)造函數(shù)叫做類(lèi)。

然而，除了作為構(gòu)造函數(shù)來(lái)制造對(duì)象外，函數(shù)通常還有另一個(gè)功能：做一件事情。正是有了這個(gè)功能，JavaScript的世界才由靜變動(dòng)，變得生機(jī)勃勃。

比如說(shuō)，我們現(xiàn)在用Function機(jī)器制造了鳥(niǎo)類(lèi)(即用來(lái)造鳥(niǎo)的機(jī)器)：

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

然后，對(duì)著造鳥(niǎo)機(jī)說(shuō)：“new！”，于是造鳥(niǎo)機(jī)發(fā)動(dòng)起來(lái)，制造一個(gè)紅色的鳥(niǎo)：

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

如果現(xiàn)在我們想讓鳥(niǎo)飛起來(lái)，該怎么辦呢？我們需要再次用Function制造出一臺(tái)機(jī)器，不過(guò)這臺(tái)機(jī)器不是用來(lái)制造對(duì)象的，而是用來(lái)做事兒的，即“讓鳥(niǎo)飛起來(lái)”這件事情：

// 這是一臺(tái)通過(guò)晃動(dòng)鳥(niǎo)的翅膀，讓鳥(niǎo)飛起來(lái)的簡(jiǎn)陋的機(jī)器。 function makeBirdFly(bird) {
    shakeBirdWing(bird);
}

我們知道，讓一臺(tái)制造對(duì)象的機(jī)器發(fā)動(dòng)，只需要對(duì)它喊“new”即可；那么怎樣讓一臺(tái)做事情的機(jī)器發(fā)動(dòng)呢？更簡(jiǎn)單，對(duì)它咳嗽一聲就行了。咳咳咳，

makeBirdFly(redBird);

于是紅鳥(niǎo)飛了起來(lái)，世界充滿了生機(jī)。

從上面的Bird和makeBirdFly的定義可以看出：實(shí)際上，制造對(duì)象的機(jī)器和做事情的機(jī)器沒(méi)什么明顯區(qū)別，不同的只是它們的使用方式。在兩種情況下，它們分別被叫做構(gòu)造函數(shù)和普通函數(shù)。

說(shuō)明1：function xxx語(yǔ)法可以看成new Function的等價(jià)形式。
說(shuō)明2：用戶自定義的函數(shù)通常既可以作為普通函數(shù)使用，又可以作為構(gòu)造函數(shù)來(lái)制造對(duì)象。ES6新增的class語(yǔ)法定義的函數(shù)只能作為構(gòu)造函數(shù)，ES6新增的=>語(yǔ)法定義的箭頭函數(shù)只能作為普通函數(shù)。

六. 讓世界立體起來(lái)

造物主對(duì)目前的世界還是不太滿意，因?yàn)閹缀跛械臋C(jī)器的模板對(duì)象都是No. 2，這使得JavaScript世界看起來(lái)有點(diǎn)扁。

于是造物主再次研究世界萬(wàn)物的分類(lèi)問(wèn)題。他發(fā)現(xiàn)有些對(duì)象會(huì)動(dòng)、還會(huì)吃東西，于是把它們叫做動(dòng)物，然后造了一臺(tái)Animal機(jī)器來(lái)制造它們。他進(jìn)一步發(fā)現(xiàn)，即使都是動(dòng)物，也還是可以進(jìn)一步分類(lèi)，比如有些會(huì)飛、有些會(huì)游，他分別把它們叫做鳥(niǎo)類(lèi)、魚(yú)類(lèi)。于是他想，我何不單獨(dú)造幾臺(tái)機(jī)器，專(zhuān)門(mén)用來(lái)制造某一類(lèi)動(dòng)物呢。于是它造出了Bird、Fish等機(jī)器。

接下來(lái)，在選擇這些機(jī)器的模板對(duì)象時(shí)碰到一個(gè)問(wèn)題：如果還像之前那樣直接復(fù)制一個(gè)No. 1對(duì)象作為Bird、Fish的模板，那么結(jié)果就是這樣的：

 

這樣可不好。首先沒(méi)體現(xiàn)出鳥(niǎo)類(lèi)、魚(yú)類(lèi)跟動(dòng)物的關(guān)系，其次它們的模板對(duì)象存了重復(fù)的東西，這可是一種浪費(fèi)啊。怎么辦呢？簡(jiǎn)單，讓Bird和Fish的模板對(duì)象繼承自Animal的模板對(duì)象就好了。就是說(shuō)

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

于是：

 

用同樣的方法，造物主造出了一個(gè)立體得多的JavaScript世界。

然而這樣還不夠。雖然那些純對(duì)象現(xiàn)在充滿了層次感，但是那些機(jī)器對(duì)象之間的關(guān)系還是扁平的：

 

那又該怎么辦呢？其實(shí)用類(lèi)似的辦法就行了：

 

為了更方便地做到這一點(diǎn)，造物主發(fā)明了class關(guān)鍵字。

七. 世界最終的樣子

經(jīng)過(guò)一番折騰，JavaScript世界發(fā)生了大變化。變得豐富多彩，同時(shí)變得很復(fù)雜。用一張圖再也沒(méi)法畫(huà)出它的全貌，只能畫(huà)出冰山一角：

 

JavaScript的世界還在不斷進(jìn)化中……

 

 藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)