解讀JavaScript中類的實(shí)現(xiàn)_AJAX教程
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
推薦：AJAX入門--概述XMLHttpRequest在使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求和處理響應(yīng)之前，必須先用JavaScript創(chuàng)建一個(gè)XMLHttpRequest對(duì)象。由于XMLHttpRequest不是一個(gè)W3C標(biāo)準(zhǔn)，所以可以采用多種方法使用JavaScript來(lái)創(chuàng)建XMLHttpRequest的實(shí)例。Internet Explorer把XMLHttpRequest實(shí)現(xiàn)為一個(gè)Active
在JavaScript中可以使用function關(guān)鍵字來(lái)定義一個(gè)“類”，如何為類添加成員。在函數(shù)內(nèi)通過(guò)this指針引用的變量或者方法都會(huì)成為類的成員，例如：function class1(){
var s="abc";
this.p1=s;
this.method1=function(){
alert("this is a test method");
}
}
var obj1=new class1();
var s="abc";
this.p1=s;
this.method1=function(){
alert("this is a test method");
}
}
var obj1=new class1();
通過(guò)new class1()獲得對(duì)象obj1，對(duì)象obj1便自動(dòng)獲得了屬性p1和方法method1。
在JavaScript中，function本身的定義就是類的構(gòu)造函數(shù)，結(jié)合前面介紹過(guò)的對(duì)象的性質(zhì)以及new操作符的用法，下面介紹使用new創(chuàng)建對(duì)象的過(guò)程。
（1）當(dāng)解釋器遇到new操作符時(shí)便創(chuàng)建一個(gè)空對(duì)象；
（2）開(kāi)始運(yùn)行class1這個(gè)函數(shù)，并將其中的this指針都指向這個(gè)新建的對(duì)象；
（3）因?yàn)楫?dāng)給對(duì)象不存在的屬性賦值時(shí)，解釋器就會(huì)為對(duì)象創(chuàng)建該屬性，例如在class1中，當(dāng)執(zhí)行到this.p1=s這條語(yǔ)句時(shí)，就會(huì)添加一個(gè)屬性p1，并把變量s的值賦給它，這樣函數(shù)執(zhí)行就是初始化這個(gè)對(duì)象的過(guò)程，即實(shí)現(xiàn)構(gòu)造函數(shù)的作用；
（4）當(dāng)函數(shù)執(zhí)行完后，new操作符就返回初始化后的對(duì)象。
通過(guò)這整個(gè)過(guò)程，JavaScript中就實(shí)現(xiàn)了面向?qū)ο蟮幕緳C(jī)制。由此可見(jiàn)，在JavaScript中，function的定義實(shí)際上就是實(shí)現(xiàn)一個(gè)對(duì)象的構(gòu)造器，是通過(guò)函數(shù)來(lái)完成的。這種方式的缺點(diǎn)是：
·將所有的初始化語(yǔ)句、成員定義都放到一起，代碼邏輯不夠清晰，不易實(shí)現(xiàn)復(fù)雜的功能。
·每創(chuàng)建一個(gè)類的實(shí)例，都要執(zhí)行一次構(gòu)造函數(shù)。構(gòu)造函數(shù)中定義的屬性和方法總被重復(fù)的創(chuàng)建，例如：
this.method1=function(){
alert("this is a test method");
}
alert("this is a test method");
}
這里的method1每創(chuàng)建一個(gè)class1的實(shí)例，都會(huì)被創(chuàng)建一次，造成了內(nèi)存的浪費(fèi)。下一節(jié)介紹另一種類定義的機(jī)制：prototype對(duì)象，可以解決構(gòu)造函數(shù)中定義類成員帶來(lái)的缺點(diǎn)。
使用prototype對(duì)象定義類成員
上一節(jié)介紹了類的實(shí)現(xiàn)機(jī)制以及構(gòu)造函數(shù)的實(shí)現(xiàn)，現(xiàn)在介紹另一種為類添加成員的機(jī)制：prototype對(duì)象。當(dāng)new一個(gè)function時(shí)，該對(duì)象的成員將自動(dòng)賦給所創(chuàng)建的對(duì)象，例如：
＜script language="JavaScript" type="text/javascript"＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
}
//使用函數(shù)的prototype屬性給類定義新成員
class1.prototype.showProp=function(){
alert(this.prop);
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//調(diào)用通過(guò)prototype原型對(duì)象定義的showProp方法
obj1.showProp();
//--＞
＜/script＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
}
//使用函數(shù)的prototype屬性給類定義新成員
class1.prototype.showProp=function(){
alert(this.prop);
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//調(diào)用通過(guò)prototype原型對(duì)象定義的showProp方法
obj1.showProp();
//--＞
＜/script＞
prototype是一個(gè)JavaScript對(duì)象，可以為prototype對(duì)象添加、修改、刪除方法和屬性。從而為一個(gè)類添加成員定義。
了解了函數(shù)的prototype對(duì)象，現(xiàn)在再來(lái)看new的執(zhí)行過(guò)程。
（1）創(chuàng)建一個(gè)新的對(duì)象，并讓this指針指向它；
（2）將函數(shù)的prototype對(duì)象的所有成員都賦給這個(gè)新對(duì)象；
（3）執(zhí)行函數(shù)體，對(duì)這個(gè)對(duì)象進(jìn)行初始化操作；
（4）返回（1）中創(chuàng)建的對(duì)象。
和上一節(jié)介紹的new的執(zhí)行過(guò)程相比，多了用prototype來(lái)初始化對(duì)象的過(guò)程，這也和prototype的字面意思相符，它是所對(duì)應(yīng)類的實(shí)例的原型。這個(gè)初始化過(guò)程發(fā)生在函數(shù)體（構(gòu)造器）執(zhí)行之前，所以可以在函數(shù)體內(nèi)部調(diào)用prototype中定義的屬性和方法，例如：
＜script language="JavaScript" type="text/javascript"＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
this.showProp();
}
//使用函數(shù)的prototype屬性給類定義新成員
class1.prototype.showProp=function(){
alert(this.prop);
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//--＞
＜/script＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
this.showProp();
}
//使用函數(shù)的prototype屬性給類定義新成員
class1.prototype.showProp=function(){
alert(this.prop);
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//--＞
＜/script＞
和上一段代碼相比，這里在class1的內(nèi)部調(diào)用了prototype中定義的方法showProp，從而在對(duì)象的構(gòu)造過(guò)程中就彈出了對(duì)話框，顯示prop屬性的值為1。
需要注意，原型對(duì)象的定義必須在創(chuàng)建類實(shí)例的語(yǔ)句之前，否則它將不會(huì)起作用，例如：
＜script language="JavaScript" type="text/javascript"＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
this.showProp();
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//在創(chuàng)建實(shí)例的語(yǔ)句之后使用函數(shù)的prototype屬性給類定義新成員，只會(huì)對(duì)后面創(chuàng)建的對(duì)象有效
class1.prototype.showProp=function(){
alert(this.prop);
}
//--＞
＜/script＞
＜!--
//定義一個(gè)只有一個(gè)屬性prop的類
function class1(){
this.prop=1;
this.showProp();
}
//創(chuàng)建class1的一個(gè)實(shí)例
var obj1=new class1();
//在創(chuàng)建實(shí)例的語(yǔ)句之后使用函數(shù)的prototype屬性給類定義新成員，只會(huì)對(duì)后面創(chuàng)建的對(duì)象有效
class1.prototype.showProp=function(){
alert(this.prop);
}
//--＞
＜/script＞
這段代碼將會(huì)產(chǎn)生運(yùn)行時(shí)錯(cuò)誤，顯示對(duì)象沒(méi)有showProp方法，就是因?yàn)樵摲椒ǖ亩x是在實(shí)例化一個(gè)類的語(yǔ)句之后。
由此可見(jiàn)，prototype對(duì)象專用于設(shè)計(jì)類的成員，它是和一個(gè)類緊密相關(guān)的，除此之外，prototype還有一個(gè)重要的屬性：constructor，表示對(duì)該構(gòu)造函數(shù)的引用，例如：
function class1(){
alert(1);
}
class1.prototype.constructor(); //調(diào)用類的構(gòu)造函數(shù)
alert(1);
}
class1.prototype.constructor(); //調(diào)用類的構(gòu)造函數(shù)
這段代碼運(yùn)行后將會(huì)出現(xiàn)對(duì)話框，在上面顯示文字“1”，從而可以看出一個(gè)prototype是和一個(gè)類的定義緊密相關(guān)的。實(shí)際上：class1.prototype.constructor===class1。
一種JavaScript類的設(shè)計(jì)模式
前面已經(jīng)介紹了如何定義一個(gè)類，如何初始化一個(gè)類的實(shí)例，且類可以在function定義的函數(shù)體中添加成員，又可以用prototype定義類的成員，編程的代碼顯得混亂。如何以一種清晰的方式來(lái)定義類呢？下面給出了一種類的實(shí)現(xiàn)模式。
在JavaScript中，由于對(duì)象靈活的性質(zhì)，在構(gòu)造函數(shù)中也可以為類添加成員，在增加靈活性的同時(shí)，也增加了代碼的復(fù)雜度。為了提高代碼的可讀性和開(kāi)發(fā)效率，可以采用這種定義成員的方式，而使用prototype對(duì)象來(lái)替代，這樣function的定義就是類的構(gòu)造函數(shù)，符合傳統(tǒng)意義類的實(shí)現(xiàn)：類名和構(gòu)造函數(shù)名是相同的。例如：
function class1(){
//構(gòu)造函數(shù)
}
//成員定義
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
//方法實(shí)現(xiàn)代碼
}
//構(gòu)造函數(shù)
}
//成員定義
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
//方法實(shí)現(xiàn)代碼
}
雖然上面的代碼對(duì)于類的定義已經(jīng)清晰了很多，但每定義一個(gè)屬性或方法，都需要使用一次class1.prototype，不僅代碼體積變大，而且易讀性還不夠。為了進(jìn)一步改進(jìn)，可以使用無(wú)類型對(duì)象的構(gòu)造方法來(lái)指定prototype對(duì)象，從而實(shí)現(xiàn)類的成員定義：
//定義一個(gè)類class1
function class1(){
//構(gòu)造函數(shù)
}
//通過(guò)指定prototype對(duì)象來(lái)實(shí)現(xiàn)類的成員定義
class1.prototype={
someProperty:"sample", someMethod:function(){
//方法代碼
},
…//其他屬性和方法.
}
function class1(){
//構(gòu)造函數(shù)
}
//通過(guò)指定prototype對(duì)象來(lái)實(shí)現(xiàn)類的成員定義
class1.prototype={
someProperty:"sample", someMethod:function(){
//方法代碼
},
…//其他屬性和方法.
}
上面的代碼用一種很清晰的方式定義了class1，構(gòu)造函數(shù)直接用類名來(lái)實(shí)現(xiàn)，而成員使用無(wú)類型對(duì)象來(lái)定義，以列表的方式實(shí)現(xiàn)了所有屬性和方法，并且可以在定義的同時(shí)初始化屬性的值。這也更象傳統(tǒng)意義面向?qū)ο笳Z(yǔ)言中類的實(shí)現(xiàn)。只是構(gòu)造函數(shù)和類的成員定義被分為了兩個(gè)部分，這可看成JavaScript中定義類的一種固定模式，這樣在使用時(shí)會(huì)更加容易理解。
注意：在一個(gè)類的成員之間互相引用，必須通過(guò)this指針來(lái)進(jìn)行，例如在上面例子中的someMethod方法中，如果要使用屬性someProperty，必須通過(guò)this.someProperty的形式，因?yàn)樵贘avaScript中每個(gè)屬性和方法都是獨(dú)立的，它們通過(guò)this指針聯(lián)系在一個(gè)對(duì)象上。
分享：淺析AJAX中JavaScript類的三種成員實(shí)現(xiàn)類的公有成員 前面定義的任何類成員都屬于公有成員的范疇，該類的任何實(shí)例都對(duì)外公開(kāi)這些屬性和方法。 實(shí)現(xiàn)類的私有成員 私有成員即在類的內(nèi)部實(shí)現(xiàn)中可以共享的成員，不對(duì)外公開(kāi)。JavaScript中并沒(méi)有特殊的機(jī)制來(lái)定義私有成員，但可以用一些技巧來(lái)實(shí)現(xiàn)這
相關(guān)AJAX教程：
- Ajax中瀏覽器的緩存問(wèn)題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- Ajax并不神秘揭下各種Ajax控件和類庫(kù)的小褲衩
- Ajax $.getJSON案例詳解
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- 如何掌握AJAX之AJAX通訊技術(shù)
- jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
- ajax跨域訪問(wèn)代理文件下載(asp、php、asp.net)
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
- 解析AJAX進(jìn)度條
猜你也喜歡看這些
- AJAX教程之由省份選擇城市
- 用AJAX編寫用戶注冊(cè)實(shí)例及技術(shù)小結(jié)
- 掌握Ajax 第1部分:Ajax簡(jiǎn)介
- 好用的AJAX類代碼分享
- 解析AJAX中的一些關(guān)鍵技術(shù)
- 基于AJAX技術(shù)實(shí)現(xiàn)Struts校驗(yàn)框架
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫)
- AJAX 請(qǐng)求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解
- 淺析AJAX實(shí)例：動(dòng)態(tài)進(jìn)度條
- 談Ajax 中的高級(jí)請(qǐng)求和響應(yīng)
- 相關(guān)鏈接：
- 教程說(shuō)明：
AJAX教程-解讀JavaScript中類的實(shí)現(xiàn)
。