Javascript教程:重溫Javascript繼承機制

文章簡介：重溫Javascript繼承機制.

上段時間，團隊內部有過好幾次幾次給力的分享，這裡對西風師傅分享的繼承機制稍作整理一下，適當加了寫口語化的描述，留作備案。

一、講個故事吧

澄清在先，Java 和Javascript是雷鋒和雷峰塔的關係。Javascript原名Mocha，當時還叫做LiveScript，創造者是Brendan Eich，現任Mozilla公司首席技術官。

1994年，曆史上第一個比較成熟的網路瀏覽器——Navigator0.9版誕生在網景公司（Netscape），極為轟動。
但是，Navigator0.9隻能用來瀏覽，不具備與訪問者互動的能力，比如，使用者提交一個資料表單，如果表單為空白，瀏覽器是無法判斷的，只能直接提交給伺服器端，再把空值的錯誤返回，讓使用者重新填寫，這樣顯然是低效率和浪費資源的。

這個時候，對於正處於技術革新最前沿的 Netscape，開發一種實用的用戶端指令碼語言來處理這些問題變得必要起來，於是，這個任務落到了工程師Brendan Eich身上。他覺得吧，木必要設計得很複雜，只要能搞定一些簡單操作就夠了，比如判斷使用者有沒有填寫表單。

1994年正是物件導向編程（object-oriented programming）的興盛時代，C++是最流行的語言，而Java語言的1.0版即將於次年推出，Brendan Eich難免受其影響， 他想將Javascript裡面所有的資料類型看做是對象（object），這一點與Java非常相似。但是，他馬上就遇到了一個難題，到底要不要設計”繼承”機制呢？

二、繼承的演變

1、採用new關鍵字產生執行個體

處理表單驗證這樣簡易功能指令碼語言顯然是不需要”繼承”機制的，然而如果Javascript裡面都是對象，就需要有一種辦法來把所有對象聯絡起來。最後，Brendan Eich還是設計了”繼承”。只是，他並沒有引入”類”（class）的概念，因為一旦有了”類”，Javascript就是一種完整的物件導向程式設計語言了，
這好像有點太正式了，與設計初衷也遠了，同時增加了初學者的入門難度。
參照到C++和Java語言都使用new命令來產生執行個體：

C++這樣寫：

ClassName *object = new ClassName(param);

Java這樣寫：

Foo foo = new Foo();

那麼，也可以把new命令引入了Javascript，用來從原型對象產生一個執行個體對象。但是，Javascript中沒有”類”的話，怎樣表示原型對象呢？
依然是參照C++和Java使用new命令時，都會調用”類”的建構函式（constructor）。Brendan Eich簡化了設計，在Javascript語言中，new命令後面跟的是建構函式，不再是類。
我們舉個例子來說，現在有一個叫做WD建構函式，表示前端開發（web-developper）對象的原型。

function WD(skill){this.skill = skill;}

對這個建構函式使用new關鍵字，就會產生一個前端開發對象的執行個體。

var WD1 = new WD('html');console.log(WD1.skill); // html

在建構函式中的this關鍵字，它其實代表的是新建立的執行個體對象。

2、new 出來對象的缺陷

採用new關鍵字，用建構函式產生執行個體對象無法共用屬性和方法。
比如，在WD對象的建構函式中，設定一個執行個體對象的共有屬性skill。

function WD(skill){this.skill = skill;this.sex = '男';}

然後，產生兩個執行個體對象：

var WD1 = new WD('html');var WD2 = new WD('css');

這兩個對象的skill屬性是獨立的，修改其中一個，不會影響到另一個。

WD1.skill= 'Javascript';console.log(WD2.skill);//“css”，不受WD1的影響

每一個執行個體對象，都有自己的屬性和方法的副本。這不僅無法做到資料共用，也是極大的資源浪費。

3、引入prototype屬性

為了實現屬性和方法的共用，Brendan Eich決定為建構函式設定一個prototype屬性。
這個屬性包含一個對象（以下簡稱”prototype對象”），所有執行個體對象需要共用的屬性和方法，都放在這個對象裡面；那些不需要共用的屬性和方法，就放在建構函式裡面。
執行個體對象一旦建立，將自動引用prototype對象的屬性和方法。也就是說，執行個體對象的屬性和方法，分成兩種，一種是本地的，另一種是引用的。
還是以WD建構函式為例，現在用prototype屬性進行改寫：

function WD(skill){this.skill = skill;}WD.prototype = { sex : '男' };var WD1 = new WD('html');var WD2 = new WD('css');console.log(WD1.sex); // 男console.log(WD2.sex); // 男

現在，sex屬性放在prototype對象裡，是兩個執行個體對象共用的。只要修改了prototype對象，就會同時影響到兩個執行個體對象。

WD.prototype.sex = '女';console.log(WD1.sex); //女console.log(WD2.sex); // 女

由於所有的執行個體對象共用同一個prototype對象，那麼從外界看起來，prototype對象就好像是執行個體對象的原型，而執行個體對象則好像”繼承”了prototype對象一樣。這就是Javascript繼承機制的設計思想。

[1] [2] [3]  下一頁