Javascript教程:重溫Javascript繼承機制

來源:互聯網
上載者:User

文章簡介:重溫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]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。