JS面向?qū)ο缶幊虦\析
更新時間：2011年08月28日 19:51:14 作者：
下面就結(jié)合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向?qū)ο蟮木幊獭?/div>
在AJAX興起以前，很多人寫JS可以說都是毫無章法可言的，基本上是想到什么就寫什么，就是一個接一個的函數(shù)function，遇到重復的還得copy，如果一不小心函數(shù)重名了，還真不知道從何開始查找錯誤，因為大家總是用面向過程的編程思想來寫JS代碼，而且也由于網(wǎng)絡上充斥了太多小“巧”的JS代碼段，很多都是隨意而為，很不規(guī)范，這也就造成了大家對JS的“誤解”，一味的認為它就是一個輔助的小東東，而不適合做大的東西開發(fā)。但是自從AJAX興起后，大量的JS代碼編寫要求人們具備像寫JAVA類似的代碼一樣，能夠面向?qū)ο筮M行開發(fā)。
所以下面就結(jié)合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向?qū)ο蟮木幊?。其實使用JS進行面向?qū)ο箝_發(fā)也不是很難的事情，因為在JS中每一個function就是一個對象，比如如下一個函數(shù)：
function HelloWorld()
{
alert('hello world!');
}
那么我們在使用的時候就可以把它當成一個對象來使用，比如使用如下的測試函數(shù)：
function _test()
{
var obj = new HelloWorld();
}
那么在調(diào)用_test方法后就會彈出hello world！的提示框，也就是調(diào)用了HelloWorld()對象（函數(shù)）。在這里HelloWorld這個對象沒有任何屬性和方法，它只有一個構(gòu)造方法HelloWorld()，我們可以把它想象成JAVA中的一個沒有任何屬性和方法的類，當使用new進行對象創(chuàng)建的時候，就調(diào)用了它的構(gòu)造方法。這也是我們最簡單的對象了，當然了，一個對象肯定是要賦予它屬性和方法的，在JS中我們使用prototype原型關鍵字進行賦值，比如我要給HelloWorld對象增加一個sayHello方法和一個name屬性，那么就可以這樣添加：
HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name);
}
}
那么就可以為HelloWorld添加了一個name屬性和sayHello方法，我們再改一下_test方法，如下：
function _test()
{
var obj = new HelloWorld();
obj.sayHello();
}
那么調(diào)用_test方法后就會先后打印hello wordl!和JavaScript（一個是構(gòu)造方法中的alert，一個是sayHello方法中的alert）。注意sayHello方法中的alert引用了this關鍵字，該關鍵字表示的就是HelloWorld對象，即默認指向該對象，和JAVA中的this關鍵字一樣。
對于向一個對象添加實例方法和屬性，我們可以采用上述的方式，即使用prototype關鍵字進行賦值，格式如下：
對象名稱.prototype = {
屬性一 : 屬性值,
屬性二 : 屬性值,
方法一 : function(參數(shù)列表) {
方法體;
},
方法二 : function(參數(shù)列表) {
方法體;
}
}
可以按照如上方式對一個對象進行多個屬性和方法的定義，這樣在new一個對象后，就可以使用實例名稱.屬性或方法來獲取屬性或執(zhí)行方法了。
在上面的方法中，大家不知道發(fā)現(xiàn)沒有對象的屬性是可以直接訪問的，比如訪問HelloWorld對象的name屬性就可以使用obj.name直接獲取。這就好比我們JAVA中的公有屬性了，而且我們還可以直接對name屬性進行賦值操作。所以現(xiàn)在有一個問題了，我們?nèi)绾谓o一個對象賦一個私有成員變量呢？那我們就可能要改一下HelloWorld類的聲明方式了，不使用prototype進行類的屬性和方法聲明，而是直接使用內(nèi)嵌函數(shù)和屬性進行聲明，修改的HelloWorld如下，我們命名為HelloWorld2：
function HelloWorld2()
{
var privateProp = 'hello world 2!';
this.method = function() {
alert(privateProp);
}
}
看到HelloWorld2的類申明方式了沒？是直接在函數(shù)內(nèi)部進行了函數(shù)嵌套申明，而且我們還設置了一個局部變量privateProp，即我們的私有成員變量，該變量只能被HelloWorld2內(nèi)部的函數(shù)進行訪問，外部訪問是不允許的，這樣我們就可以通過使用變量的作用域來巧妙的設置類的私有變量了。我們應用如下：
function _test2()
{
var obj2 = new HelloWorld2();
obj2.method(); // 調(diào)用該方法將打印'hello world 2!
alert(obj2.privateProp); // 將打印undefined
}
上面所說的都是如何定義一個類，以為如何為一個類定義屬性和方法，由于采用prototype方式進行定義清晰明了，所以一般都是使用該方式進行類的定義，而且現(xiàn)在很多AJAX框架中都使用了類似的類聲明方式。而且類的私有成員變量卻只能在類的構(gòu)造方式中的函數(shù)進行訪問，這樣類的prototype聲明的方法就不能訪問該私有成員變量了，而且可讀性方面也沒有prototype方式好。
好了，上面所說的都是定義一個類的實例方法和屬性。在JAVA中類有實例方法和屬性與類方法和屬性之分。所謂類屬性和方法就是該類的所有實例都只維護一份類屬性和類方法的副本，而不是每個實例都維護一套，這和實例屬性和實例方法是不一樣的。那么在JS中如何為一個類定義靜態(tài)類方法和類屬性呢？我們可以直接為類添加靜態(tài)屬性和靜態(tài)方法，比如為HelloWorld類添加一個age的靜態(tài)屬性和一個hello的靜態(tài)方法，那么聲明如下：
HelloWorld.age = 22;
HelloWorld.hello = function() {
alert(HelloWorld.age);
}
那么這樣就為類HelloWorld聲明了靜態(tài)屬性age和靜態(tài)方法hello了。在使用的時候就直接使用類名進行訪問了，但是不能使用實例進行訪問，這點與JAVA中的是一致的，測試如下：
function _test()
{
var obj = new HelloWorld();
obj.sayHello(); // 正確，實例方法，可以通過實例進行訪問
HelloWorld.hello(); // 正確，靜態(tài)方法，通過類名進行直接訪問
obj.hello(); // 錯誤，不能通過實例訪問靜態(tài)方法。會報JS錯誤！
}
通過以上的說明，相信大家對JS進行面向?qū)ο缶幊逃辛艘欢ǖ牧私?，而且也一定蠢蠢欲動了吧，呵呵，大家不妨試試（提示：以上代碼全部通過測試！）
所以下面就結(jié)合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向?qū)ο蟮木幊?。其實使用JS進行面向?qū)ο箝_發(fā)也不是很難的事情，因為在JS中每一個function就是一個對象，比如如下一個函數(shù)：
復制代碼 代碼如下:
function HelloWorld()
{
alert('hello world!');
}
那么我們在使用的時候就可以把它當成一個對象來使用，比如使用如下的測試函數(shù)：
復制代碼 代碼如下:
function _test()
{
var obj = new HelloWorld();
}
那么在調(diào)用_test方法后就會彈出hello world！的提示框，也就是調(diào)用了HelloWorld()對象（函數(shù)）。在這里HelloWorld這個對象沒有任何屬性和方法，它只有一個構(gòu)造方法HelloWorld()，我們可以把它想象成JAVA中的一個沒有任何屬性和方法的類，當使用new進行對象創(chuàng)建的時候，就調(diào)用了它的構(gòu)造方法。這也是我們最簡單的對象了，當然了，一個對象肯定是要賦予它屬性和方法的，在JS中我們使用prototype原型關鍵字進行賦值，比如我要給HelloWorld對象增加一個sayHello方法和一個name屬性，那么就可以這樣添加：
復制代碼 代碼如下:
HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name);
}
}
那么就可以為HelloWorld添加了一個name屬性和sayHello方法，我們再改一下_test方法，如下：
復制代碼 代碼如下:
function _test()
{
var obj = new HelloWorld();
obj.sayHello();
}
那么調(diào)用_test方法后就會先后打印hello wordl!和JavaScript（一個是構(gòu)造方法中的alert，一個是sayHello方法中的alert）。注意sayHello方法中的alert引用了this關鍵字，該關鍵字表示的就是HelloWorld對象，即默認指向該對象，和JAVA中的this關鍵字一樣。
對于向一個對象添加實例方法和屬性，我們可以采用上述的方式，即使用prototype關鍵字進行賦值，格式如下：
復制代碼 代碼如下:
對象名稱.prototype = {
屬性一 : 屬性值,
屬性二 : 屬性值,
方法一 : function(參數(shù)列表) {
方法體;
},
方法二 : function(參數(shù)列表) {
方法體;
}
}
可以按照如上方式對一個對象進行多個屬性和方法的定義，這樣在new一個對象后，就可以使用實例名稱.屬性或方法來獲取屬性或執(zhí)行方法了。
在上面的方法中，大家不知道發(fā)現(xiàn)沒有對象的屬性是可以直接訪問的，比如訪問HelloWorld對象的name屬性就可以使用obj.name直接獲取。這就好比我們JAVA中的公有屬性了，而且我們還可以直接對name屬性進行賦值操作。所以現(xiàn)在有一個問題了，我們?nèi)绾谓o一個對象賦一個私有成員變量呢？那我們就可能要改一下HelloWorld類的聲明方式了，不使用prototype進行類的屬性和方法聲明，而是直接使用內(nèi)嵌函數(shù)和屬性進行聲明，修改的HelloWorld如下，我們命名為HelloWorld2：
復制代碼 代碼如下:
function HelloWorld2()
{
var privateProp = 'hello world 2!';
this.method = function() {
alert(privateProp);
}
}
看到HelloWorld2的類申明方式了沒？是直接在函數(shù)內(nèi)部進行了函數(shù)嵌套申明，而且我們還設置了一個局部變量privateProp，即我們的私有成員變量，該變量只能被HelloWorld2內(nèi)部的函數(shù)進行訪問，外部訪問是不允許的，這樣我們就可以通過使用變量的作用域來巧妙的設置類的私有變量了。我們應用如下：
復制代碼 代碼如下:
function _test2()
{
var obj2 = new HelloWorld2();
obj2.method(); // 調(diào)用該方法將打印'hello world 2!
alert(obj2.privateProp); // 將打印undefined
}
上面所說的都是如何定義一個類，以為如何為一個類定義屬性和方法，由于采用prototype方式進行定義清晰明了，所以一般都是使用該方式進行類的定義，而且現(xiàn)在很多AJAX框架中都使用了類似的類聲明方式。而且類的私有成員變量卻只能在類的構(gòu)造方式中的函數(shù)進行訪問，這樣類的prototype聲明的方法就不能訪問該私有成員變量了，而且可讀性方面也沒有prototype方式好。
好了，上面所說的都是定義一個類的實例方法和屬性。在JAVA中類有實例方法和屬性與類方法和屬性之分。所謂類屬性和方法就是該類的所有實例都只維護一份類屬性和類方法的副本，而不是每個實例都維護一套，這和實例屬性和實例方法是不一樣的。那么在JS中如何為一個類定義靜態(tài)類方法和類屬性呢？我們可以直接為類添加靜態(tài)屬性和靜態(tài)方法，比如為HelloWorld類添加一個age的靜態(tài)屬性和一個hello的靜態(tài)方法，那么聲明如下：
復制代碼 代碼如下:
HelloWorld.age = 22;
HelloWorld.hello = function() {
alert(HelloWorld.age);
}
那么這樣就為類HelloWorld聲明了靜態(tài)屬性age和靜態(tài)方法hello了。在使用的時候就直接使用類名進行訪問了，但是不能使用實例進行訪問，這點與JAVA中的是一致的，測試如下：
復制代碼 代碼如下:
function _test()
{
var obj = new HelloWorld();
obj.sayHello(); // 正確，實例方法，可以通過實例進行訪問
HelloWorld.hello(); // 正確，靜態(tài)方法，通過類名進行直接訪問
obj.hello(); // 錯誤，不能通過實例訪問靜態(tài)方法。會報JS錯誤！
}
通過以上的說明，相信大家對JS進行面向?qū)ο缶幊逃辛艘欢ǖ牧私?，而且也一定蠢蠢欲動了吧，呵呵，大家不妨試試（提示：以上代碼全部通過測試！）
您可能感興趣的文章:
- JavaScript面向?qū)ο笾叽蠡驹瓌t實例詳解
- JavaScript面向?qū)ο笕齻€基本特征實例詳解【封裝、繼承與多態(tài)】
- JS面向?qū)ο缶幊獭狤S6 中class的繼承用法詳解
- JS面向?qū)ο蠡A講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
- 淺談Javascript面向?qū)ο缶幊?/a>
- js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解
- 從面試題學習Javascript 面向?qū)ο螅▌?chuàng)建對象）
- JAVASCRIPT THIS詳解 面向?qū)ο?/a>
- JavaScript面向?qū)ο蠛诵闹R與概念歸納整理
相關文章
中文逗號如何轉(zhuǎn)英文，下面為大家詳細介紹下，感興趣的朋友不要錯過2014-02-02
本文介紹了如何在網(wǎng)頁中實現(xiàn)一個動態(tài)顯示的時鐘,并且添加了白天和夜晚兩種模式的切換功能,通過簡單的HTML結(jié)構(gòu)和JavaScript代碼,使用Date()函數(shù)動態(tài)獲取當前的時間,并將時、分、秒通過邏輯綁定到相應的div元素上,實現(xiàn)時鐘的動態(tài)顯示,需要的朋友可以參考下2024-09-09
js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法
這篇文章主要介紹了js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)運動緩沖效果的封裝函數(shù),涉及JavaScript時間函數(shù)與數(shù)值運算相關操作技巧,需要的朋友可以參考下2018-02-02
手機圖片滑動切換，網(wǎng)上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行，本例介紹的是無css3元素純js腳本編寫的wap圖片滾動特效2014-08-08
JavaScript使用html2canvas實現(xiàn)截取HTML并生成圖片
在前端開發(fā)中,有時我們需要將網(wǎng)頁的一部分或整個頁面截取并保存為圖片,這在生成報告、分享內(nèi)容或保存用戶界面狀態(tài)等場景中非常有用,本文將介紹如何使用 JavaScript 庫 html2canvas 來實現(xiàn)這一功能,并提供一個完整的示例,需要的朋友可以參考下2024-10-10
下面小編就為大家?guī)硪黄狫S 日期與時間戮相互轉(zhuǎn)化的簡單實例。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
使用JavaScript判斷用戶輸入的是否為正整數(shù)(兩種方法)
在項目開發(fā)中，需要使用JavaScript驗證用戶輸入的是否為正整數(shù)，下面小編給大家分享兩種方法，需要的朋友參考下2017-02-02
JavaScript中的Window.open()用法示例詳解
這篇文章主要給大家介紹了關于JavaScript中Window.open()用法的相關資料,今天在項目中用到了彈出子窗口,就想到了用JavaScript實現(xiàn)的兩種方法,其中一個就是window.open(),需要的朋友可以參考下2023-07-07
三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情
這篇文章主要介紹了三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08