淺談JavaScript中面向?qū)ο蠹夹g(shù)的模擬
更新時(shí)間:2006年09月25日 00:00:00 作者:
一、引言
在C#和Java語言中,面向?qū)ο笫且灶惖姆绞綄?shí)現(xiàn)的,特別是繼承這個(gè)特性,類的方式繼承表現(xiàn)出了強(qiáng)大的功能,而且也易于學(xué)習(xí)。JavaScript不是純的面向?qū)ο蟮恼Z言,而是基于對(duì)象的語言,對(duì)象的繼承是以原型函數(shù)的形式繼承的,很多初學(xué)者剛開始接觸的時(shí)候不太理解,但是JavaScript這種以原型函數(shù)的形式實(shí)現(xiàn)面向?qū)ο蠹夹g(shù),不僅是可行的,而且還為面向?qū)ο蠹夹g(shù)提供了動(dòng)態(tài)繼承的功能,本文主要討論了JavaScript的面向?qū)ο蠹夹g(shù)。
二、原型對(duì)象概述
每個(gè)JavaScript對(duì)象都有原型對(duì)象,對(duì)象都繼承原型對(duì)象的所有屬性。一個(gè)對(duì)象的原型是由創(chuàng)建該對(duì)象的構(gòu)造函數(shù)定義的。JavaScript的所有函數(shù)都有一個(gè)名為prototype的屬性,該屬性引用了原型對(duì)象,該原型對(duì)象初始化的時(shí)候只有constructor屬性來引用創(chuàng)建該原型對(duì)象的對(duì)象。JavaScript沒有Class定義類的概念,構(gòu)造函數(shù)就定義了類,并初始化類中的屬性,每個(gè)類的成員都會(huì)從原型對(duì)象中繼承相同的屬性,也就是說,原型對(duì)象提供了類的實(shí)例共享的屬性和方法,這就節(jié)約了內(nèi)存。
當(dāng)讀取一個(gè)對(duì)象的屬性的時(shí)候,JavaScript會(huì)先從對(duì)象中查找,如果沒有查找到,才會(huì)到原型對(duì)象中查找該屬性(或方法),所以,尤其是對(duì)于方法,最好保存到原型對(duì)象中以便于共享,并且達(dá)到節(jié)省內(nèi)存的目的,而且原型對(duì)象還有一個(gè)強(qiáng)大的功能,那就是如果通過構(gòu)造函數(shù)實(shí)例化一些對(duì)象后,再給構(gòu)造函數(shù)的原型對(duì)象增加屬性和方法,那么它原來實(shí)例化的對(duì)象實(shí)例將會(huì)繼承這些增加的屬性和方法。
三、對(duì)象屬性、對(duì)象方法、類屬性、類方法
每個(gè)對(duì)象都會(huì)有自己單獨(dú)的實(shí)例屬性和實(shí)例方法的副本,如果實(shí)例化5個(gè)對(duì)象,那么就會(huì)有5個(gè)對(duì)象的實(shí)例屬性和實(shí)例方法副本。This關(guān)鍵字引用它們的實(shí)例對(duì)象,也就是說,誰操作了實(shí)例方法,this就引用誰;訪問了哪個(gè)實(shí)例對(duì)象的屬性,this就引用這個(gè)實(shí)例對(duì)象。
類方法和類屬性只有一個(gè)副本,類方法調(diào)用的時(shí)候必須引用類的名字,例如:Date.setHours();
下面用一個(gè)程序來表現(xiàn)實(shí)例屬性、實(shí)例方法、類屬性、類方法
function Mobile(kind,brand) {
this.kind=kind;//定義手機(jī)的種類,例如GSM/CDMA
this.brand=brand;//定義手機(jī)的品牌,this關(guān)鍵字表示用該構(gòu)造函數(shù)實(shí)例化之后的對(duì)象
}
/**//*
定義類的第二步是在構(gòu)造函數(shù)的原型對(duì)象中定義它的實(shí)例方法或其他屬性
該對(duì)象定義的任何屬性都將這個(gè)類的所有實(shí)例繼承。
*/
//撥號(hào),這里只是返回電話號(hào)碼
Mobile.prototype.dial = function(phoneNo) {
return phoneNo;
};
/**//*
定義類的第三步是定義類方法,常量和其他必要的類屬性,作為構(gòu)造函數(shù)自身的屬性,而不是構(gòu)造函數(shù)
原型對(duì)象的屬性,注意,類方法沒有使用關(guān)鍵字this,因?yàn)樗麄冎粚?duì)他們的實(shí)際參數(shù)進(jìn)行操作。
*/
//開機(jī)關(guān)機(jī)方法
Mobile.turnOn=function() {
return "The power of mobile is on";
}
Mobile.turnOff=function() {
return "The power of mobile is off";
}
//類屬性,這樣他們就可以被用作常量,注意實(shí)際上他們并不是只讀的
Mobile.screenColor=64K;//假設(shè)該類手機(jī)的屏幕顏色都是64K彩屏的
四、子類化
JavaScript支持子類化,只需把子類的原型對(duì)象用超類實(shí)例化即可,但是應(yīng)該注意,這樣子類化之后就會(huì)存在一個(gè)問題,由于是用超類實(shí)例化子類的原型對(duì)象取得的,所以就沖掉了自己本身的由JavaScript提供的constructor屬性,為了確保constructor的正確性,需要重新指定一下,子類化的程序例子如下:
/***** 子類化 *****/
//下面是子類構(gòu)造函數(shù)智能型手機(jī)
function SmartPhone(os)
{
this.os=os;
}
//我們將Mobile對(duì)象作為它的原型
//這意味著新類的實(shí)例將繼承SmartPhone.prototype,
//后者由Mobile.prototype繼承而來
//Mobile.prototype又由Object.prototype繼承而來
SmartPhone.prototype=new Mobile(GSM,Nokia);
//下面給子類添加一個(gè)新方法,發(fā)送電子郵件,這里只是返回Email地址
SmartPhone.prototype.sendEmail=function(emailAddress) {
return this.emailAddress
}
//上面的子類化方法有一點(diǎn)缺陷,由于我們明確把SmartPhone.prototype設(shè)成了我們所創(chuàng)建的一個(gè)對(duì)象,所以就覆蓋了JS提供
//的原型對(duì)象,而且丟棄了給定的Constructor屬性。該屬性引用的是創(chuàng)建這個(gè)對(duì)象的構(gòu)造函數(shù)。但是SmartPhone對(duì)象集成了它的
//父類的constructor,它自己沒有這個(gè)屬性,明確設(shè)置著一個(gè)屬性可以解決這個(gè)問題:
SmartPhone.prototype.constructor=SmartPhone;
var objSmartPhone=new SmartPhone();//實(shí)例化子類
在C#和Java語言中,面向?qū)ο笫且灶惖姆绞綄?shí)現(xiàn)的,特別是繼承這個(gè)特性,類的方式繼承表現(xiàn)出了強(qiáng)大的功能,而且也易于學(xué)習(xí)。JavaScript不是純的面向?qū)ο蟮恼Z言,而是基于對(duì)象的語言,對(duì)象的繼承是以原型函數(shù)的形式繼承的,很多初學(xué)者剛開始接觸的時(shí)候不太理解,但是JavaScript這種以原型函數(shù)的形式實(shí)現(xiàn)面向?qū)ο蠹夹g(shù),不僅是可行的,而且還為面向?qū)ο蠹夹g(shù)提供了動(dòng)態(tài)繼承的功能,本文主要討論了JavaScript的面向?qū)ο蠹夹g(shù)。
二、原型對(duì)象概述
每個(gè)JavaScript對(duì)象都有原型對(duì)象,對(duì)象都繼承原型對(duì)象的所有屬性。一個(gè)對(duì)象的原型是由創(chuàng)建該對(duì)象的構(gòu)造函數(shù)定義的。JavaScript的所有函數(shù)都有一個(gè)名為prototype的屬性,該屬性引用了原型對(duì)象,該原型對(duì)象初始化的時(shí)候只有constructor屬性來引用創(chuàng)建該原型對(duì)象的對(duì)象。JavaScript沒有Class定義類的概念,構(gòu)造函數(shù)就定義了類,并初始化類中的屬性,每個(gè)類的成員都會(huì)從原型對(duì)象中繼承相同的屬性,也就是說,原型對(duì)象提供了類的實(shí)例共享的屬性和方法,這就節(jié)約了內(nèi)存。
當(dāng)讀取一個(gè)對(duì)象的屬性的時(shí)候,JavaScript會(huì)先從對(duì)象中查找,如果沒有查找到,才會(huì)到原型對(duì)象中查找該屬性(或方法),所以,尤其是對(duì)于方法,最好保存到原型對(duì)象中以便于共享,并且達(dá)到節(jié)省內(nèi)存的目的,而且原型對(duì)象還有一個(gè)強(qiáng)大的功能,那就是如果通過構(gòu)造函數(shù)實(shí)例化一些對(duì)象后,再給構(gòu)造函數(shù)的原型對(duì)象增加屬性和方法,那么它原來實(shí)例化的對(duì)象實(shí)例將會(huì)繼承這些增加的屬性和方法。
三、對(duì)象屬性、對(duì)象方法、類屬性、類方法
每個(gè)對(duì)象都會(huì)有自己單獨(dú)的實(shí)例屬性和實(shí)例方法的副本,如果實(shí)例化5個(gè)對(duì)象,那么就會(huì)有5個(gè)對(duì)象的實(shí)例屬性和實(shí)例方法副本。This關(guān)鍵字引用它們的實(shí)例對(duì)象,也就是說,誰操作了實(shí)例方法,this就引用誰;訪問了哪個(gè)實(shí)例對(duì)象的屬性,this就引用這個(gè)實(shí)例對(duì)象。
類方法和類屬性只有一個(gè)副本,類方法調(diào)用的時(shí)候必須引用類的名字,例如:Date.setHours();
下面用一個(gè)程序來表現(xiàn)實(shí)例屬性、實(shí)例方法、類屬性、類方法
復(fù)制代碼 代碼如下:
function Mobile(kind,brand) {
this.kind=kind;//定義手機(jī)的種類,例如GSM/CDMA
this.brand=brand;//定義手機(jī)的品牌,this關(guān)鍵字表示用該構(gòu)造函數(shù)實(shí)例化之后的對(duì)象
}
/**//*
定義類的第二步是在構(gòu)造函數(shù)的原型對(duì)象中定義它的實(shí)例方法或其他屬性
該對(duì)象定義的任何屬性都將這個(gè)類的所有實(shí)例繼承。
*/
//撥號(hào),這里只是返回電話號(hào)碼
Mobile.prototype.dial = function(phoneNo) {
return phoneNo;
};
/**//*
定義類的第三步是定義類方法,常量和其他必要的類屬性,作為構(gòu)造函數(shù)自身的屬性,而不是構(gòu)造函數(shù)
原型對(duì)象的屬性,注意,類方法沒有使用關(guān)鍵字this,因?yàn)樗麄冎粚?duì)他們的實(shí)際參數(shù)進(jìn)行操作。
*/
//開機(jī)關(guān)機(jī)方法
Mobile.turnOn=function() {
return "The power of mobile is on";
}
Mobile.turnOff=function() {
return "The power of mobile is off";
}
//類屬性,這樣他們就可以被用作常量,注意實(shí)際上他們并不是只讀的
Mobile.screenColor=64K;//假設(shè)該類手機(jī)的屏幕顏色都是64K彩屏的
四、子類化
JavaScript支持子類化,只需把子類的原型對(duì)象用超類實(shí)例化即可,但是應(yīng)該注意,這樣子類化之后就會(huì)存在一個(gè)問題,由于是用超類實(shí)例化子類的原型對(duì)象取得的,所以就沖掉了自己本身的由JavaScript提供的constructor屬性,為了確保constructor的正確性,需要重新指定一下,子類化的程序例子如下:
/***** 子類化 *****/
//下面是子類構(gòu)造函數(shù)智能型手機(jī)
function SmartPhone(os)
{
this.os=os;
}
//我們將Mobile對(duì)象作為它的原型
//這意味著新類的實(shí)例將繼承SmartPhone.prototype,
//后者由Mobile.prototype繼承而來
//Mobile.prototype又由Object.prototype繼承而來
SmartPhone.prototype=new Mobile(GSM,Nokia);
//下面給子類添加一個(gè)新方法,發(fā)送電子郵件,這里只是返回Email地址
SmartPhone.prototype.sendEmail=function(emailAddress) {
return this.emailAddress
}
//上面的子類化方法有一點(diǎn)缺陷,由于我們明確把SmartPhone.prototype設(shè)成了我們所創(chuàng)建的一個(gè)對(duì)象,所以就覆蓋了JS提供
//的原型對(duì)象,而且丟棄了給定的Constructor屬性。該屬性引用的是創(chuàng)建這個(gè)對(duì)象的構(gòu)造函數(shù)。但是SmartPhone對(duì)象集成了它的
//父類的constructor,它自己沒有這個(gè)屬性,明確設(shè)置著一個(gè)屬性可以解決這個(gè)問題:
SmartPhone.prototype.constructor=SmartPhone;
var objSmartPhone=new SmartPhone();//實(shí)例化子類
相關(guān)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式(代理模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹代理模式,對(duì)代理模式進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-12-12解決在Bootstrap模糊框中使用WebUploader的問題
這篇文章主要介紹了在Bootstrap模糊框中使用WebUploader的問題及解決方法,,需要的朋友可以參考下2018-03-03微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂組件實(shí)例代碼
這篇文章主要介紹了微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂組件,需要的朋友可以參考下2018-08-08JS實(shí)現(xiàn)css hover操作的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)css hover操作的方法,涉及javascript事件響應(yīng)及頁面元素css屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法
這篇文章主要介紹了JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法,結(jié)合實(shí)例形式分析了JS正則替換的常用技巧與注意事項(xiàng),需要的朋友可以參考下2017-01-01uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07javascript比較兩個(gè)日期相差天數(shù)的方法
這篇文章主要介紹了javascript比較兩個(gè)日期相差天數(shù)的方法,涉及javascript針對(duì)日期的轉(zhuǎn)換與數(shù)學(xué)運(yùn)算相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07