JavaScript 的繼承
更新時(shí)間：2011年10月01日 00:39:44 作者：
大家都知道，C#中使用的是傳統(tǒng)的類繼承是很簡(jiǎn)單，但在JS中，可就沒這么簡(jiǎn)單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對(duì)復(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)的類繼承是很簡(jiǎn)單，但在JS中，可就沒這么簡(jiǎn)單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對(duì)復(fù)雜了一點(diǎn)。
//定義 People 對(duì)象
var People = function () { };
People.prototype = {
Height: 175,
Walk: function () {
alert("People are walking...");
}
}
//定義 Me 對(duì)象
var Me = function () { };
//設(shè)置 Me 的 prototype 屬性為 People 對(duì)象
Me.prototype = new People();
//將創(chuàng)建 Me 對(duì)象的引用指回給 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對(duì)象即繼承了People對(duì)象，可以訪問People原型的屬性和動(dòng)作，又可以有Me自己的動(dòng)作和屬性。需特別注意的是，上面例子中實(shí)例化了一個(gè)y=new Me()，但顯示它的Height屬性時(shí)，并不是原始是175，而是被m實(shí)例修改后的185， 因此，new Me() 并不會(huì)創(chuàng)建一個(gè)新的People實(shí)現(xiàn)，而是重復(fù)使用它原型上的實(shí)例。因此上面例子，所有的Me對(duì)象都會(huì)共享相同的Height屬性，這一點(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)的類繼承是很簡(jiǎn)單，但在JS中，可就沒這么簡(jiǎn)單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對(duì)復(fù)雜了一點(diǎn)。
復(fù)制代碼 代碼如下:
//定義 People 對(duì)象
var People = function () { };
People.prototype = {
Height: 175,
Walk: function () {
alert("People are walking...");
}
}
//定義 Me 對(duì)象
var Me = function () { };
//設(shè)置 Me 的 prototype 屬性為 People 對(duì)象
Me.prototype = new People();
//將創(chuàng)建 Me 對(duì)象的引用指回給 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對(duì)象即繼承了People對(duì)象，可以訪問People原型的屬性和動(dòng)作，又可以有Me自己的動(dòng)作和屬性。需特別注意的是，上面例子中實(shí)例化了一個(gè)y=new Me()，但顯示它的Height屬性時(shí)，并不是原始是175，而是被m實(shí)例修改后的185， 因此，new Me() 并不會(huì)創(chuàng)建一個(gè)新的People實(shí)現(xiàn)，而是重復(fù)使用它原型上的實(shí)例。因此上面例子，所有的Me對(duì)象都會(huì)共享相同的Height屬性，這一點(diǎn)在繼承使用中要特別留意。
相關(guān)文章
感覺很流暢的js實(shí)現(xiàn)的鍵盤控制（帶慣性）
感覺很流暢的js實(shí)現(xiàn)的鍵盤控制（帶慣性）...2007-06-06
你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹
本篇文章小編為大家介紹，你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹。需要的朋友參考下2013-04-04
js實(shí)現(xiàn)多選項(xiàng)切換導(dǎo)航菜單的方法
這篇文章主要介紹了js實(shí)現(xiàn)多選項(xiàng)切換導(dǎo)航菜單的方法,可實(shí)現(xiàn)動(dòng)態(tài)生成多選項(xiàng)切換導(dǎo)航菜單的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02
Javascript的嚴(yán)格模式strict mode詳細(xì)介紹
這篇文章主要介紹了Javascript的嚴(yán)格模式strict mode詳細(xì)介紹,重點(diǎn)介紹了嚴(yán)格模式的使用方法及使用strict mode后對(duì)javascript語(yǔ)法上帶來的改變,需要的朋友可以參考下2014-06-06
大家都知道JS是一門動(dòng)態(tài)語(yǔ)言，與傳統(tǒng)的c和c++最大的區(qū)別就是js是在運(yùn)行時(shí)動(dòng)態(tài)檢測(cè)值的類型和變化。this是js中的一個(gè)關(guān)鍵字，它代表當(dāng)前作用域的上下文環(huán)境，而且隨著上下文的改變而動(dòng)態(tài)變化。這篇文章我們將詳細(xì)介紹Javascript中綁定this的三種方法與簡(jiǎn)單的比較。2016-10-10
JS 頁(yè)面內(nèi)容搜索，類似于 Ctrl+F功能的實(shí)現(xiàn)代碼
JS 頁(yè)面內(nèi)容搜索，類似于 Ctrl+F功能的實(shí)現(xiàn)代碼...2007-08-08
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)...2007-08-08
javascript模擬評(píng)分控件實(shí)現(xiàn)方法
這篇文章主要介紹了javascript模擬評(píng)分控件實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JavaScript中如何在一個(gè)循環(huán)中等待示例代碼詳解
這篇文章主要介紹了在JavaScript中如何在一個(gè)循環(huán)中等待（附代碼示例）,下面是如何使用for..of 循環(huán)來迭代一個(gè)數(shù)組并在循環(huán)內(nèi)等待，需要的朋友可以參考下2022-08-08
聊聊那些使用前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫(kù)
本文介紹了前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫(kù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09