1. 程式人生 > >js面向物件寫法

js面向物件寫法

在AJAX興起以前,很多人寫JS可以說都是毫無章法可言的,基本上是想到什麼就寫什麼,就是一個接一個的函式function,遇到重複的還得copy,如果一不小心函式重名了,還真不知道從何開始查詢錯誤,因為大家總是用面向過程的程式設計思想來寫JS程式碼,而且也由於網路上充斥了太多小“巧”的JS程式碼段,很多都是隨意而為,很不規範,這也就造成了大家對JS的“誤解”,一味的認為它就是一個輔助的小東東,而不適合做大的東西開發。但是自從AJAX興起後,大量的JS程式碼編寫要求人們具備像寫JAVA類似的程式碼一樣,能夠面向物件進行開發。

    所以下面就結合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向物件的程式設計。其實使用JS進行面向物件開發也不是很難的事情,因為在JS中每一個function就是一個物件,比如如下一個函式:

function HelloWorld()
{
    alert('hello world!');
}

那麼我們在使用的時候就可以把它當成一個物件來使用,比如使用如下的測試函式:

function _test()
{
    var obj = new HelloWorld();
}

那麼在呼叫_test方法後就會彈出hello world!的提示框,也就是呼叫了HelloWorld()物件(函式)。在這裡HelloWorld這個物件沒有任何屬性和方法,它只有一個構造方法HelloWorld(),我們可以把它想象成JAVA中的一個沒有任何屬性和方法的類,當使用new進行物件建立的時候,就呼叫了它的構造方法。這也是我們最簡單的物件了,當然了,一個物件肯定是要賦予它屬性和方法的,在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();
}

那麼呼叫_test方法後就會先後列印hello wordl!和JavaScript(一個是構造方法中的alert,一個是sayHello方法中的alert)。注意sayHello方法中的alert引用了this關鍵字,該關鍵字表示的就是HelloWorld物件,即預設指向該物件,和JAVA中的this關鍵字一樣。

對於向一個物件新增例項方法和屬性,我們可以採用上述的方式,即使用prototype關鍵字進行賦值,格式如下:

物件名稱.prototype = {
屬性一 : 屬性值,
屬性二 : 屬性值,
方法一 : function(引數列表) {
    方法體;
},
方法二 : function(引數列表) {
    方法體;
}
}

可以按照如上方式對一個物件進行多個屬性和方法的定義,這樣在new一個物件後,就可以使用例項名稱.屬性或方法來獲取屬性或執行方法了。

    在上面的方法中,大家不知道發現沒有物件的屬性是可以直接訪問的,比如訪問HelloWorld物件的name屬性就可以使用obj.name直接獲取。這就好比我們JAVA中的公有屬性了,而且我們還可以直接對name屬性進行賦值操作。所以現在有一個問題了,我們如何給一個物件賦一個私有成員變數呢?那我們就可能要改一下HelloWorld類的宣告方式了,不使用prototype進行類的屬性和方法宣告,而是直接使用內嵌函式和屬性進行宣告,修改的HelloWorld如下,我們命名為HelloWorld2:

function HelloWorld2()
{
    var privateProp = 'hello world 2!';
    this.method = function() {
         alert(privateProp);
    }
}

    看到HelloWorld2的類申明方式了沒?是直接在函式內部進行了函式巢狀申明,而且我們還設定了一個區域性變數privateProp,即我們的私有成員變數,該變數只能被HelloWorld2內部的函式進行訪問,外部訪問是不允許的,這樣我們就可以通過使用變數的作用域來巧妙的設定類的私有變量了。我們應用如下:

function _test2()
{
    var obj2 = new HelloWorld2();
    obj2.method();   // 呼叫該方法將列印'hello world 2!
    alert(obj2.privateProp); // 將列印undefined
}

    上面所說的都是如何定義一個類,以為如何為一個類定義屬性和方法,由於採用prototype方式進行定義清晰明瞭,所以一般都是使用該方式進行類的定義,而且現在很多AJAX框架中都使用了類似的類宣告方式。而且類的私有成員變數卻只能在類的構造方式中的函式進行訪問,這樣類的prototype宣告的方法就不能訪問該私有成員變量了,而且可讀性方面也沒有prototype方式好。

    好了,上面所說的都是定義一個類的例項方法和屬性。在JAVA中類有例項方法和屬性與類方法和屬性之分。所謂類屬性和方法就是該類的所有例項都只維護一份類屬性和類方法的副本,而不是每個例項都維護一套,這和例項屬性和例項方法是不一樣的。那麼在JS中如何為一個類定義靜態類方法和類屬性呢?我們可以直接為類新增靜態屬性和靜態方法,比如為HelloWorld類新增一個age的靜態屬性和一個hello的靜態方法,那麼宣告如下:

HelloWorld.age = 22;
HelloWorld.hello = function() {
    alert(HelloWorld.age);
}

    那麼這樣就為類HelloWorld聲明瞭靜態屬性age和靜態方法hello了。在使用的時候就直接使用類名進行訪問了,但是不能使用例項進行訪問,這點與JAVA中的是一致的,測試如下:

function _test()
{
    var obj = new HelloWorld();
    obj.sayHello();  // 正確,例項方法,可以通過例項進行訪問
    HelloWorld.hello(); // 正確,靜態方法,通過類名進行直接訪問
    obj.hello(); // 錯誤,不能通過例項訪問靜態方法。會報JS錯誤!
}

    通過以上的說明,相信大家對JS進行面向物件程式設計有了一定的瞭解,而且也一定蠢蠢欲動了吧,呵呵,大家不妨試試哦~~(注:以上程式碼全部通過測試!)