面向?qū)ο蟮木幊趟枷朐趈avascript中的運用上部
更新時間:2009年11月20日 22:00:38 作者:
對于正在從事或者打算從事編程的人來說,面向?qū)ο笫且粋€耳熟能詳?shù)脑~,幾乎每一個人都能列舉出一些面向?qū)ο蟮木幊陶Z言,例如C++,JAVA,C#等等。
其實,面向?qū)ο蟮乃枷胧仟毩⒂诰幊陶Z言的,例如在C#中,在一個靜態(tài)類的靜態(tài)方法中,按照過程式開發(fā)調(diào)用一系列靜態(tài)函數(shù),我們很難說這是面向?qū)ο蟮木幊蹋喾?,象jquery和extjs這樣優(yōu)秀的javascript庫,卻處處體現(xiàn)著面向?qū)ο蟮脑O(shè)計思想。本文不打算探討javascript是否能夠算做面向?qū)ο蟮木幊陶Z言,這個問題是重視中國式考試的人應(yīng)該關(guān)注的,我這里只是簡單的說明如何在javascript中使用面向?qū)ο蟮木幊趟枷搿?
面向?qū)ο笫紫纫袑ο?。在javascript中創(chuàng)建一個對象非常簡單:
var o={};
這樣就產(chǎn)生了一個對象,我們可以很方便的給這個對象添加屬性和方法:
o.name="object name";
o.showName=function(){
alert(o.name);
}
不過大多數(shù)人還是習(xí)慣把對象的屬性和方法放在定義對象的一對{}里邊:
var o = {
name: "object name",
showName: function() {
alert(o.name);
}
}
訪問屬性和方法有兩種方式,第一種:
alert(o.name);
o.showName();
這種寫法很常見,C#中調(diào)用對象的屬性和方法也是這種方式。還有一種是javascript中比較特別的,使用屬性或者方法的名字作為索引來進行訪問:
alert(o["name"]);
o["showName"]();
這好像有點和孔乙己“茴香的茴字有幾種寫法”差不多了,事實上,很少有人使用索引來調(diào)用對象的屬性或者方法。
除了我們自定義的屬性和方法,我們的對象還有一個constructor屬性以及toString()等方法。這些屬性和方法是從Object內(nèi)置對象來的,所有的對象都會有這些屬性和方法。其中constructor屬性指向構(gòu)造出該對象的構(gòu)造函數(shù)。我們沒有使用構(gòu)造函數(shù)來創(chuàng)建對象,事實上,js的解釋器會使用Object構(gòu)造函數(shù)。如果我們自己定義了構(gòu)造函數(shù),那么便可以通過該構(gòu)造函數(shù)來創(chuàng)建對象,這樣可以使得創(chuàng)建的對象具有相同的屬性和方法,這便開始有點面向?qū)ο蟮奈兜懒?。好,我們從一個簡單的例子開始看看如何創(chuàng)建一個構(gòu)造函數(shù)吧:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
}
我們定義了一個名字叫Person的構(gòu)造函數(shù),該構(gòu)造函數(shù)有三個屬性和一個方法,通過構(gòu)造函數(shù)來產(chǎn)生一個對象并調(diào)用方法也非常簡單:
var zhangsan = new Person("張三", "男", 18);
zhangsan.showInfo();
運行后我們可以看到彈出一個對話框,顯示出這個叫張三的人的信息:

我們還可以看看對象的constructor屬性來看看zhangsan的構(gòu)造函數(shù)是不是我們定義好的Person:
alert(zhangsan.constructor);
結(jié)果如圖:

可以看到,正是我們的Person構(gòu)造函數(shù)。
不過,這里還是有點問題,每一次我們構(gòu)造一個對象,都會在內(nèi)存中為屬性和方法分配內(nèi)存空間,而事實上,所有的對象完全可以用同一個方法,并不需要有多個方法的副本,這樣有些浪費內(nèi)存空間。既然意識到了這個問題,讓我們來想想如何解決吧。一個很自然的想法是,既然我們只想為方法分配一次內(nèi)存空間,那么我們可以設(shè)置一個值用來標(biāo)識方法的內(nèi)存空間是否已經(jīng)分配,按照這個思路,我們將構(gòu)造函數(shù)做如下修改:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
if (typeof Person._initialized == "undefined") {
this.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
Person._initialized = true;
}
}
這里,我們用一個成員_initialized來指示是否已經(jīng)對方法進行了內(nèi)存空間的分配。當(dāng)?shù)谝粋€對象構(gòu)造的時候_initialized未被定義,所以我們的判斷語句為真,這時會對方法進行了定義并分配內(nèi)存空間,然后把_initialized的值設(shè)置為true,用以表明方法的內(nèi)存空間已經(jīng)分配了。第二個對象構(gòu)造的時候則不會再進入判斷,因而也不會再一次分配內(nèi)存空間。似乎沒什么問題,運行一下看看,張三的信息依然正常顯示。雖然不辛苦,不過解決了一個小問題,還是慶祝下吧,來盤回鍋肉,我要大快朵頤。還沒開吃,一個叫李四的MM也想讓電腦彈出她的個人信息。OK,很簡單,再構(gòu)造一個對象,然后調(diào)用showInfo方法就可以了:
var lisi = new Person("李四", "女", 28);
lisi.showInfo();
為了照顧MM,還把這段放在了張三的前邊。MM的信息正確顯示出來了,可是張三的資料不見了。這下張三不樂意了,排名放在MM后邊也罷了,但好歹得有名字啊。這可苦了我這編程人員,回鍋肉看來沒辦法吃了,先改bug吧。打開firebug,看到MM的信息顯示之后出現(xiàn)錯誤,提示為:zhangsan.showInfo is not a function。設(shè)置斷點看看,構(gòu)造zhangsi對象以后發(fā)現(xiàn)并沒有showInfo這個方法。原來showInfo方法雖然只有一個,但是存在于第一個對象之中,第二個對象并不能訪問。那么,究竟如何才能讓同一個構(gòu)造函數(shù)產(chǎn)生的對象共用同一個函數(shù)呢?javascript中的prototype給我們提供了這個功能。根據(jù)javascript的規(guī)范中描述,每一個構(gòu)造函數(shù)都有一個prototype屬性用于實現(xiàn)繼承和屬性的共享。我們的showInfo方法也可以看作是一個屬性,該屬性指向一個函數(shù)的引用?,F(xiàn)在我們使用prototype來使得我們的方法可以共享,代碼的改動很簡單,把this.showInfo改成Person.prototype.showInfo就可以了,改動之后的代碼如下:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
if (typeof Person._initialized == "undefined") {
Person.prototype.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
Person._initialized = true;
}
}
使用該構(gòu)造函數(shù)生成兩個對象:
var lisi = new Person("李四", "女", 28);
lisi.showInfo();
var zhangsan = new Person("張三", "男", 18);
zhangsan.showInfo();
運行之后先顯示李四的信息,然后是張三的信息?,F(xiàn)在兩個人都滿意了,可惜我的回鍋肉已經(jīng)涼了
面向?qū)ο笫紫纫袑ο?。在javascript中創(chuàng)建一個對象非常簡單:
復(fù)制代碼 代碼如下:
var o={};
這樣就產(chǎn)生了一個對象,我們可以很方便的給這個對象添加屬性和方法:
復(fù)制代碼 代碼如下:
o.name="object name";
o.showName=function(){
alert(o.name);
}
不過大多數(shù)人還是習(xí)慣把對象的屬性和方法放在定義對象的一對{}里邊:
復(fù)制代碼 代碼如下:
var o = {
name: "object name",
showName: function() {
alert(o.name);
}
}
訪問屬性和方法有兩種方式,第一種:
復(fù)制代碼 代碼如下:
alert(o.name);
o.showName();
這種寫法很常見,C#中調(diào)用對象的屬性和方法也是這種方式。還有一種是javascript中比較特別的,使用屬性或者方法的名字作為索引來進行訪問:
復(fù)制代碼 代碼如下:
alert(o["name"]);
o["showName"]();
這好像有點和孔乙己“茴香的茴字有幾種寫法”差不多了,事實上,很少有人使用索引來調(diào)用對象的屬性或者方法。
除了我們自定義的屬性和方法,我們的對象還有一個constructor屬性以及toString()等方法。這些屬性和方法是從Object內(nèi)置對象來的,所有的對象都會有這些屬性和方法。其中constructor屬性指向構(gòu)造出該對象的構(gòu)造函數(shù)。我們沒有使用構(gòu)造函數(shù)來創(chuàng)建對象,事實上,js的解釋器會使用Object構(gòu)造函數(shù)。如果我們自己定義了構(gòu)造函數(shù),那么便可以通過該構(gòu)造函數(shù)來創(chuàng)建對象,這樣可以使得創(chuàng)建的對象具有相同的屬性和方法,這便開始有點面向?qū)ο蟮奈兜懒?。好,我們從一個簡單的例子開始看看如何創(chuàng)建一個構(gòu)造函數(shù)吧:
復(fù)制代碼 代碼如下:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
}
我們定義了一個名字叫Person的構(gòu)造函數(shù),該構(gòu)造函數(shù)有三個屬性和一個方法,通過構(gòu)造函數(shù)來產(chǎn)生一個對象并調(diào)用方法也非常簡單:
復(fù)制代碼 代碼如下:
var zhangsan = new Person("張三", "男", 18);
zhangsan.showInfo();
運行后我們可以看到彈出一個對話框,顯示出這個叫張三的人的信息:

我們還可以看看對象的constructor屬性來看看zhangsan的構(gòu)造函數(shù)是不是我們定義好的Person:
復(fù)制代碼 代碼如下:
alert(zhangsan.constructor);
結(jié)果如圖:

可以看到,正是我們的Person構(gòu)造函數(shù)。
不過,這里還是有點問題,每一次我們構(gòu)造一個對象,都會在內(nèi)存中為屬性和方法分配內(nèi)存空間,而事實上,所有的對象完全可以用同一個方法,并不需要有多個方法的副本,這樣有些浪費內(nèi)存空間。既然意識到了這個問題,讓我們來想想如何解決吧。一個很自然的想法是,既然我們只想為方法分配一次內(nèi)存空間,那么我們可以設(shè)置一個值用來標(biāo)識方法的內(nèi)存空間是否已經(jīng)分配,按照這個思路,我們將構(gòu)造函數(shù)做如下修改:
復(fù)制代碼 代碼如下:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
if (typeof Person._initialized == "undefined") {
this.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
Person._initialized = true;
}
}
這里,我們用一個成員_initialized來指示是否已經(jīng)對方法進行了內(nèi)存空間的分配。當(dāng)?shù)谝粋€對象構(gòu)造的時候_initialized未被定義,所以我們的判斷語句為真,這時會對方法進行了定義并分配內(nèi)存空間,然后把_initialized的值設(shè)置為true,用以表明方法的內(nèi)存空間已經(jīng)分配了。第二個對象構(gòu)造的時候則不會再進入判斷,因而也不會再一次分配內(nèi)存空間。似乎沒什么問題,運行一下看看,張三的信息依然正常顯示。雖然不辛苦,不過解決了一個小問題,還是慶祝下吧,來盤回鍋肉,我要大快朵頤。還沒開吃,一個叫李四的MM也想讓電腦彈出她的個人信息。OK,很簡單,再構(gòu)造一個對象,然后調(diào)用showInfo方法就可以了:
復(fù)制代碼 代碼如下:
var lisi = new Person("李四", "女", 28);
lisi.showInfo();
為了照顧MM,還把這段放在了張三的前邊。MM的信息正確顯示出來了,可是張三的資料不見了。這下張三不樂意了,排名放在MM后邊也罷了,但好歹得有名字啊。這可苦了我這編程人員,回鍋肉看來沒辦法吃了,先改bug吧。打開firebug,看到MM的信息顯示之后出現(xiàn)錯誤,提示為:zhangsan.showInfo is not a function。設(shè)置斷點看看,構(gòu)造zhangsi對象以后發(fā)現(xiàn)并沒有showInfo這個方法。原來showInfo方法雖然只有一個,但是存在于第一個對象之中,第二個對象并不能訪問。那么,究竟如何才能讓同一個構(gòu)造函數(shù)產(chǎn)生的對象共用同一個函數(shù)呢?javascript中的prototype給我們提供了這個功能。根據(jù)javascript的規(guī)范中描述,每一個構(gòu)造函數(shù)都有一個prototype屬性用于實現(xiàn)繼承和屬性的共享。我們的showInfo方法也可以看作是一個屬性,該屬性指向一個函數(shù)的引用?,F(xiàn)在我們使用prototype來使得我們的方法可以共享,代碼的改動很簡單,把this.showInfo改成Person.prototype.showInfo就可以了,改動之后的代碼如下:
復(fù)制代碼 代碼如下:
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
if (typeof Person._initialized == "undefined") {
Person.prototype.showInfo = function() {
alert("姓名:" + this.name + " 性別:" + this.sex + " 年齡:" + this.age);
}
Person._initialized = true;
}
}
使用該構(gòu)造函數(shù)生成兩個對象:
復(fù)制代碼 代碼如下:
var lisi = new Person("李四", "女", 28);
lisi.showInfo();
var zhangsan = new Person("張三", "男", 18);
zhangsan.showInfo();
運行之后先顯示李四的信息,然后是張三的信息?,F(xiàn)在兩個人都滿意了,可惜我的回鍋肉已經(jīng)涼了
相關(guān)文章
javascript 面向?qū)ο缶幊?function也是類
function在javascript中用來創(chuàng)建函數(shù)或方法,但要想實現(xiàn)面向?qū)ο蠓绞降木幊?,類是不可或缺的角色之一,而且是主角?/div> 2009-09-09javascript最常用與實用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式2010-08-08javascript 設(shè)計模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
單體是在腳本加載時創(chuàng)建的,能將一系列有關(guān)聯(lián)的變量和方法組織為一個邏輯單元,邏輯單元里面的內(nèi)容通過單一的變量進行訪問,也是筆記基礎(chǔ)與常用的面向?qū)ο蟮亩x方法。2010-04-04XRegExp 0.2: Now With Named Capture
XRegExp 0.2: Now With Named Capture...2007-11-11JavaScript 面向?qū)ο蟮闹接谐蓡T和公開成員
這節(jié)來說下JavaScript的私有成員和公開成員,雖然JavaScript沒有private和public關(guān)鍵字,但還是那句話——作為開發(fā)人員我們要有面向?qū)ο蟮乃枷耄?2010-05-05最新評論