JS面向?qū)ο缶幊虦\析
所以下面就結(jié)合我自己的體會(huì)和所學(xué)習(xí)的東東和大家一起來(lái)學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊?。其?shí)使用JS進(jìn)行面向?qū)ο箝_發(fā)也不是很難的事情,因?yàn)樵贘S中每一個(gè)function就是一個(gè)對(duì)象,比如如下一個(gè)函數(shù):
function HelloWorld()
{
alert('hello world!');
}
那么我們?cè)谑褂玫臅r(shí)候就可以把它當(dāng)成一個(gè)對(duì)象來(lái)使用,比如使用如下的測(cè)試函數(shù):
function _test()
{
var obj = new HelloWorld();
}
那么在調(diào)用_test方法后就會(huì)彈出hello world!的提示框,也就是調(diào)用了HelloWorld()對(duì)象(函數(shù))。在這里HelloWorld這個(gè)對(duì)象沒(méi)有任何屬性和方法,它只有一個(gè)構(gòu)造方法HelloWorld(),我們可以把它想象成JAVA中的一個(gè)沒(méi)有任何屬性和方法的類,當(dāng)使用new進(jìn)行對(duì)象創(chuàng)建的時(shí)候,就調(diào)用了它的構(gòu)造方法。這也是我們最簡(jiǎn)單的對(duì)象了,當(dāng)然了,一個(gè)對(duì)象肯定是要賦予它屬性和方法的,在JS中我們使用prototype原型關(guān)鍵字進(jìn)行賦值,比如我要給HelloWorld對(duì)象增加一個(gè)sayHello方法和一個(gè)name屬性,那么就可以這樣添加:
HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name);
}
}
那么就可以為HelloWorld添加了一個(gè)name屬性和sayHello方法,我們?cè)俑囊幌耞test方法,如下:
function _test()
{
var obj = new HelloWorld();
obj.sayHello();
}
那么調(diào)用_test方法后就會(huì)先后打印hello wordl!和JavaScript(一個(gè)是構(gòu)造方法中的alert,一個(gè)是sayHello方法中的alert)。注意sayHello方法中的alert引用了this關(guān)鍵字,該關(guān)鍵字表示的就是HelloWorld對(duì)象,即默認(rèn)指向該對(duì)象,和JAVA中的this關(guān)鍵字一樣。
對(duì)于向一個(gè)對(duì)象添加實(shí)例方法和屬性,我們可以采用上述的方式,即使用prototype關(guān)鍵字進(jìn)行賦值,格式如下:
對(duì)象名稱.prototype = {
屬性一 : 屬性值,
屬性二 : 屬性值,
方法一 : function(參數(shù)列表) {
方法體;
},
方法二 : function(參數(shù)列表) {
方法體;
}
}
可以按照如上方式對(duì)一個(gè)對(duì)象進(jìn)行多個(gè)屬性和方法的定義,這樣在new一個(gè)對(duì)象后,就可以使用實(shí)例名稱.屬性或方法來(lái)獲取屬性或執(zhí)行方法了。
在上面的方法中,大家不知道發(fā)現(xiàn)沒(méi)有對(duì)象的屬性是可以直接訪問(wèn)的,比如訪問(wèn)HelloWorld對(duì)象的name屬性就可以使用obj.name直接獲取。這就好比我們JAVA中的公有屬性了,而且我們還可以直接對(duì)name屬性進(jìn)行賦值操作。所以現(xiàn)在有一個(gè)問(wèn)題了,我們?nèi)绾谓o一個(gè)對(duì)象賦一個(gè)私有成員變量呢?那我們就可能要改一下HelloWorld類的聲明方式了,不使用prototype進(jìn)行類的屬性和方法聲明,而是直接使用內(nèi)嵌函數(shù)和屬性進(jìn)行聲明,修改的HelloWorld如下,我們命名為HelloWorld2:
function HelloWorld2()
{
var privateProp = 'hello world 2!';
this.method = function() {
alert(privateProp);
}
}
看到HelloWorld2的類申明方式了沒(méi)?是直接在函數(shù)內(nèi)部進(jìn)行了函數(shù)嵌套申明,而且我們還設(shè)置了一個(gè)局部變量privateProp,即我們的私有成員變量,該變量只能被HelloWorld2內(nèi)部的函數(shù)進(jìn)行訪問(wèn),外部訪問(wèn)是不允許的,這樣我們就可以通過(guò)使用變量的作用域來(lái)巧妙的設(shè)置類的私有變量了。我們應(yīng)用如下:
function _test2()
{
var obj2 = new HelloWorld2();
obj2.method(); // 調(diào)用該方法將打印'hello world 2!
alert(obj2.privateProp); // 將打印undefined
}
上面所說(shuō)的都是如何定義一個(gè)類,以為如何為一個(gè)類定義屬性和方法,由于采用prototype方式進(jìn)行定義清晰明了,所以一般都是使用該方式進(jìn)行類的定義,而且現(xiàn)在很多AJAX框架中都使用了類似的類聲明方式。而且類的私有成員變量卻只能在類的構(gòu)造方式中的函數(shù)進(jìn)行訪問(wèn),這樣類的prototype聲明的方法就不能訪問(wèn)該私有成員變量了,而且可讀性方面也沒(méi)有prototype方式好。
好了,上面所說(shuō)的都是定義一個(gè)類的實(shí)例方法和屬性。在JAVA中類有實(shí)例方法和屬性與類方法和屬性之分。所謂類屬性和方法就是該類的所有實(shí)例都只維護(hù)一份類屬性和類方法的副本,而不是每個(gè)實(shí)例都維護(hù)一套,這和實(shí)例屬性和實(shí)例方法是不一樣的。那么在JS中如何為一個(gè)類定義靜態(tài)類方法和類屬性呢?我們可以直接為類添加靜態(tài)屬性和靜態(tài)方法,比如為HelloWorld類添加一個(gè)age的靜態(tài)屬性和一個(gè)hello的靜態(tài)方法,那么聲明如下:
HelloWorld.age = 22;
HelloWorld.hello = function() {
alert(HelloWorld.age);
}
那么這樣就為類HelloWorld聲明了靜態(tài)屬性age和靜態(tài)方法hello了。在使用的時(shí)候就直接使用類名進(jìn)行訪問(wèn)了,但是不能使用實(shí)例進(jìn)行訪問(wèn),這點(diǎn)與JAVA中的是一致的,測(cè)試如下:
function _test()
{
var obj = new HelloWorld();
obj.sayHello(); // 正確,實(shí)例方法,可以通過(guò)實(shí)例進(jìn)行訪問(wèn)
HelloWorld.hello(); // 正確,靜態(tài)方法,通過(guò)類名進(jìn)行直接訪問(wèn)
obj.hello(); // 錯(cuò)誤,不能通過(guò)實(shí)例訪問(wèn)靜態(tài)方法。會(huì)報(bào)JS錯(cuò)誤!
}
通過(guò)以上的說(shuō)明,相信大家對(duì)JS進(jìn)行面向?qū)ο缶幊逃辛艘欢ǖ牧私?,而且也一定蠢蠢欲?dòng)了吧,呵呵,大家不妨試試(提示:以上代碼全部通過(guò)測(cè)試!)
- JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
- JavaScript面向?qū)ο笕齻€(gè)基本特征實(shí)例詳解【封裝、繼承與多態(tài)】
- JS面向?qū)ο缶幊獭狤S6 中class的繼承用法詳解
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- 淺談Javascript面向?qū)ο缶幊?/a>
- js面向?qū)ο笾小⑺接?、靜態(tài)屬性和方法詳解
- 從面試題學(xué)習(xí)Javascript 面向?qū)ο螅▌?chuàng)建對(duì)象)
- JAVASCRIPT THIS詳解 面向?qū)ο?/a>
- JavaScript面向?qū)ο蠛诵闹R(shí)與概念歸納整理
相關(guān)文章
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問(wèn)題
下面小編就為大家?guī)?lái)一篇老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10JavaScript獲取頁(yè)面中超鏈接數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁(yè)面中超鏈接數(shù)量的方法,涉及JavaScript針對(duì)頁(yè)面元素獲取及運(yùn)算的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Bootstrap+jfinal退出系統(tǒng)彈出確認(rèn)框的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap+jfinal退出系統(tǒng)彈出框的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-05-05JS實(shí)現(xiàn)環(huán)形進(jìn)度條(從0到100%)效果
這篇文章主要介紹了JS實(shí)現(xiàn)環(huán)形進(jìn)度條(從0到100%)效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07Javascript表達(dá)式中連續(xù)的 && 和 || 之賦值區(qū)別
了區(qū)分賦值表達(dá)式中出現(xiàn)的連續(xù)的 ‘&&’和 ‘||’的不同的賦值含義,做了一個(gè)小測(cè)試.2010-10-10JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
今天小編就為大家分享一篇js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08解決layer圖標(biāo)icon不加載的問(wèn)題
今天小編就為大家分享一篇解決layer圖標(biāo)icon不加載的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范
眾所周知正則表達(dá)式非常強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05