快捷導(dǎo)航

JavaScript 的繼承

更新時(shí)間：2011年10月01日 00:39:44 作者：

大家都知道，C#中使用的是傳統(tǒng)的類繼承是很簡單，但在JS中，可就沒這么簡單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對復(fù)雜了一點(diǎn)。

【廢話】
　　面試時(shí)被經(jīng)理問到其中一個(gè)問題讓我印象很深刻，因?yàn)槲蚁肓撕芫脹]能答上來。題目是 JavaScript是怎樣實(shí)現(xiàn)繼承的？面向?qū)ο笫窃陂_發(fā)過程中一直使用的，因此，繼承也是最基礎(chǔ)的一部分，自己開始接觸JS到現(xiàn)在差不多兩年多了，這個(gè)基礎(chǔ)我竟然都沒過關(guān)，看來我的理論功還要加大力度提升啊?。?！我重新查了資料，終于深刻理解下來了。廢話就這么多了，Coding Action...
【正文】
　　大家都知道，C#中使用的是傳統(tǒng)的類繼承是很簡單，但在JS中，可就沒這么簡單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對復(fù)雜了一點(diǎn)。

復(fù)制代碼代碼如下:

 
//定義 People 對象 
var People = function () { }; 
People.prototype = { 
Height: 175, 
Walk: function () { 
alert("People are walking..."); 
} 
} 
//定義 Me 對象 
var Me = function () { }; 
//設(shè)置 Me 的 prototype 屬性為 People 對象 
Me.prototype = new People(); 
//將創(chuàng)建 Me 對象的引用指回給 Me 
Me.prototype.constructor = Me; 
//修改 Height 屬性 
Me.prototype.SetHeight = function (v) { 
Me.prototype.Height = v; 
} 
//新增 Stop 動(dòng)作 
Me.prototype.Stop = function () { 
alert("I'm Stop."); 
} 
var m = new Me(); 
//結(jié)果為 People are 175cm tall. 
alert("People are " + m.Height + "cm tall."); 
m.SetHeight(185); 
//結(jié)果為 I'm 185cm tall. 
alert("I'm " + m.Height + "cm tall."); 
//結(jié)果為 People are walking... 
m.Walk(); 
//結(jié)果為 I'm Stop. 
m.Stop(); 
var y = new Me(); 
//結(jié)果為 You're 185cm tall. 
alert("You're " + y.Height + "cm tall."); 

從上面例子可以看出，Me對象即繼承了People對象，可以訪問People原型的屬性和動(dòng)作，又可以有Me自己的動(dòng)作和屬性。需特別注意的是，上面例子中實(shí)例化了一個(gè)y=new Me()，但顯示它的Height屬性時(shí)，并不是原始是175，而是被m實(shí)例修改后的185，因此，new Me() 并不會創(chuàng)建一個(gè)新的People實(shí)現(xiàn)，而是重復(fù)使用它原型上的實(shí)例。因此上面例子，所有的Me對象都會共享相同的Height屬性，這一點(diǎn)在繼承使用中要特別留意。