做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

JavaScript世界萬物誕生記

2016-10-28    藍(lán)藍(lán)設(shè)計的小編

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

一. 無中生有

起初,什么都沒有。

1.png

 

造物主說:沒有東西本身也是一種東西啊,于是就有了null:


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

有一個聲音說:不是有null嘛?

另一個聲音說:可是null代表無啊。

造物主說:那就無中生有吧!

于是:

2.png

 

JavaScript中的1號對象產(chǎn)生了,不妨把它叫做No. 1。

這個No. 1對象可不得了,它是真正的萬物始祖。它擁有的性質(zhì),是所有的對象都有的。

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

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

既然已經(jīng)有了一個對象,剩下就好辦了,因?yàn)橐簧f物嘛。

不過造物主很懶,他不想一個一個地親手制造對象。于是他做了一臺能夠制造對象的機(jī)器:

3.png

 

他給這臺機(jī)器起了一個名字:Object。

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

機(jī)器如何啟動呢?通過new命令。你對著機(jī)器喊一聲:“new!”,對象就造出來了。

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

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

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

比如說,有一天Object機(jī)器制造一個對象,它有一個特殊的屬性,叫做flag,屬性值是10。用圖形表示是這樣的:

4.png

 

寫成代碼就是:

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

轟轟烈烈的造物運(yùn)動開始了……

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

一天天過去了,造物主來視察工作。看到Object制造出了好多好多對象,他非常高興。

同時他還發(fā)現(xiàn):根據(jù)“物以類聚”的原則,這些對象可以分成很多類。聰明的造物主想,我何不多造幾臺機(jī)器,讓每一臺機(jī)器專門負(fù)責(zé)制造某一類對象呢?于是,他動手造出了幾臺機(jī)器并給它們起了名字。它們分別是:

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

多臺機(jī)器齊開動,各司其責(zé),造物運(yùn)動進(jìn)入了一個新的階段……

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

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

5.png

 

(注:__proto__寫起來太麻煩了,后面我們用[p]來代替)

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

6.png

 

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

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

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

對啦,還缺少一臺制造機(jī)器的機(jī)器啊!

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

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

Function.__proto__ === Function.prototype

哇,太奇妙了!

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

7.png

 

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

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

同時,如果再仔細(xì)瞧瞧,你會發(fā)現(xiàn):

Object作為一個機(jī)器可以看做是有由Function制造出來的,而Function作為一個對象可以看做是由Object制造出來的。

這就是JavaScript世界的“雞生蛋,蛋生雞”問題。那么到底是誰生了誰呢?Whatever!

五. 讓世界動起來

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

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

比如說,我們現(xiàn)在用Function機(jī)器制造了鳥類(即用來造鳥的機(jī)器):

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

然后,對著造鳥機(jī)說:“new!”,于是造鳥機(jī)發(fā)動起來,制造一個紅色的鳥:

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

如果現(xiàn)在我們想讓鳥飛起來,該怎么辦呢?我們需要再次用Function制造出一臺機(jī)器,不過這臺機(jī)器不是用來制造對象的,而是用來做事兒的,即“讓鳥飛起來”這件事情:

// 這是一臺通過晃動鳥的翅膀,讓鳥飛起來的簡陋的機(jī)器。 function makeBirdFly(bird) {
    shakeBirdWing(bird);
}

我們知道,讓一臺制造對象的機(jī)器發(fā)動,只需要對它喊“new”即可;那么怎樣讓一臺做事情的機(jī)器發(fā)動呢?更簡單,對它咳嗽一聲就行了。咳咳咳,

makeBirdFly(redBird);

于是紅鳥飛了起來,世界充滿了生機(jī)。

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

說明1:function xxx語法可以看成new Function的等價形式。
說明2:用戶自定義的函數(shù)通常既可以作為普通函數(shù)使用,又可以作為構(gòu)造函數(shù)來制造對象。ES6新增的class語法定義的函數(shù)只能作為構(gòu)造函數(shù),ES6新增的=>語法定義的箭頭函數(shù)只能作為普通函數(shù)。

六. 讓世界立體起來

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

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

接下來,在選擇這些機(jī)器的模板對象時碰到一個問題:如果還像之前那樣直接復(fù)制一個No. 1對象作為Bird、Fish的模板,那么結(jié)果就是這樣的:

8.png

 

這樣可不好。首先沒體現(xiàn)出鳥類、魚類跟動物的關(guān)系,其次它們的模板對象存了重復(fù)的東西,這可是一種浪費(fèi)啊。怎么辦呢?簡單,讓Bird和Fish的模板對象繼承自Animal的模板對象就好了。就是說

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

于是:

9.png

 

用同樣的方法,造物主造出了一個立體得多的JavaScript世界。

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

10.png

 

那又該怎么辦呢?其實(shí)用類似的辦法就行了:

11.png

 

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

七. 世界最終的樣子

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

12.png

 

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

 

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

 

日歷

鏈接

個人資料

存檔