首頁 > web前端 > js教程 > JavaScript定義類別的幾種方式總結_javascript技巧

JavaScript定義類別的幾種方式總結_javascript技巧

WBOY
發布: 2016-05-16 17:05:24
原創
975 人瀏覽過

提起物件導向我們就能想到類,對象,封裝,繼承,多態。在《javaScript高級程式設計》(人民郵電出版社,曹力、張欣譯。英文名字是:Professional JavaScript for Web Developers)這本書中描述的還算比較詳細。我們來看看JavaScript中定義類別的各種方法。

1.工廠方式

javaScript中建立自己的類別和對象,我們應該是必須掌握的,我們都知道javaScript中物件的屬性可以在物件建立後動態定義,例如下面的程式碼:

複製程式碼 程式碼如下:



我們很容易使用oCar對象,但我們創造就是想創造多個Car實例。我們可以使用一個函數來封裝上面的程式碼來實現:

複製程式碼 程式碼如下:

程式碼如下:


這樣做有點意思了,但是在物件導向中我們經常使用創建物件的方法是:
Car car=new Car();

使用new 關鍵字已經深入人心,因此我們使用上面的方法去定義總感覺彆扭,並且每次調用時都去創建新的屬性以及函數,功能上也不實際。下來我們看看建構函數的形式定義類別。

2.建構子

這種方式看起來有點象工廠函數。具體表現如下:


複製程式碼 程式碼如下:
    //定義
    function Car(color, doors) {
        this.color = color;
 = function() {
            alert(this.color);
        };
    }
  var car2 = new Car("blue ", 4);
    car1.showColor();
    car2.showColor();



看起來效果很明顯,有差別了吧。感覺有點意思了。在建構函式內部創造物件使用this 關鍵字,使用new 運算子建立物件感覺非常親切。但也有點問題:每次new 物件時都會創建所有的屬性,包括函數的創建,也就是說多個物件完全獨立,我們定義類別的目的就是為了共享方法以及數據,但是car1物件與car2物件都是各自獨立的屬性與函數,最起碼我們應該共享方法。這就是原形方式的優勢所在。

3.原型方式

利用物件的prototype屬性,可把它看出建立新物件所依賴的原型。方法如下:

複製程式碼 程式碼如下:


複製代碼

代碼如下:


   Car.prototype.showColor=function(){
        alert(this.color);
   }

4);
   var car2=new Car('blue',4);

   car1.showColor();
   car2.showColor();
   car2.showColor();


   car2.showColor();

drivers);
   car1.drivers.push("stephen");
   alert(car1.drivers); //結果:Tom,Jerry,stephen
   alert(car2.drivers); //結果: Tom,Jerry
   alert(car1 instanceof Car);




此方法是把屬性放在內部定義,把方法放在外邊利用prototype來定義。解決了第三種方法的問題。

這種方法其實應該來說非常友好了,但是比起java的語法來,應該有一些不和諧,感覺比較凌亂,對C 來說,我們就沒有那麼麻煩的感覺了,可是開發C 的研發人員一般情況下很少涉及javaScript,而對J2EE的研發人員來說,這種方式總是有些彆扭。總感覺不是友善的封裝,其實只不過是視覺上封裝效果不是很好而已,要想達到視覺封裝效果而又能達到這種方法的效果的也可以以,個人認為其實比較麻煩。那就是動態原型法。

5.動態原型

對於習慣使用其他語言的開發者來說,使用混合的構造函數/原型方式感覺不那麼和諧。畢竟,定義類別時,大多數物件導向語言都對屬性和方法進行了視覺上的封裝。考慮下面的C#類別:

複製程式碼 程式碼如下:

class Carclass Carclass
{
    public string color = "red";
    public int doors = 4;
    public int mpg = 23;

    public Car(string color, int doors, int mpg) //constructor
    {
        的    this.mpg = mpg;
    }
    public void showColor() //method
    {
       #很好的打包了Car類別的所有屬性和方法,因此看見這段程式碼就知道它要實現什麼功能,它定義了一個物件的資訊。批評混合的建構子/原型方式的人認為,在建構函式記憶體找屬性,在其外部找方法的做法不合邏輯。因此,他們設計了動態原型方法,以提供更友善的編碼風格。

動態原型方法的基本想法與混合的建構子/原型方式相同,即在建構子內定義非函數屬性,而函數屬性則利用原型屬性定義。唯一的區別是賦予物件方法的位置。下面是用動態原型方法重寫的Car類:



複製代碼


代碼如下:

       this.doors = 4;            this.drivers = new Array("Tom", "Jerry");
            if (typeof Car._initialized == "undefined") {                    alert(this.color };
                }
                      //最後定義
            Car._initialized = true;
      


直到檢查typeof Car._initialized是否等於"undefined"之前,這個建構子都未改變。這行程式碼是動態原型方法中最重要的部分。如果這個值未定義,建構函式會用原型方式繼續定義物件的方法,然後把Car._initialized設為true。如果這個值定義了(當它的值為true時,typeof的值為Boolean),那就不再建立該方法。簡而言之,該方法使用標誌(_initialized)來判斷是否已給了原型任何方法。這個方法只創建並賦值一次,為取悅傳統的OOP開發者,這段程式碼看起來更像其他語言中的類別定義了。

6  混合工廠方式

這種方式通常是在無法應用前一種方式時的變通方法。它的目的是創建假建構函數,只傳回另一種物件的新實例。這段程式碼看來與工廠函數很相似:

複製程式碼 程式碼如下:
function Car() {
            var oTempCar = new Object();
          🎜>            oTempCar.mpg=23;
            oTempCar.showColor = function() {
                alert(this.color);
               }


與經典方式不同,以這種方式使用new運算符,使它看起來像真正的建構子:
var oCar = new Car();

由於在Car()建構函式內部呼叫了new運算符,所以將忽略第二個new運算子(位於建構函式之外)。在建構函式內部建立的物件被傳遞回變數var。這種方式在物件方法的內部管理上與經典方式有著相同的問題。強烈建議:除非萬不得已(請參閱第15章),還是避免使用這種方式。

總結:(採用哪種方式)
目前使用最廣泛的是混合的建構子/原型方式。此外,動態原型方法也很流行,在功能上與建構函數/原型方式等價。可以採用這兩種方式中的任何一種。不過不要單獨使用經典的建構子或原型方式,因為這樣會為程式碼引入問題。


複製程式碼

程式碼如下://ps//staticic class (1/static class (1/static class> :function)    var CarCollection = new function() {
        var _carCollection = new Array(); //global.         alert('Add' );
        }
        this.Get = function(carid) {
          }

//static class (2:json)


    var Car = {
        color: 'red',
        doors: 4, Car.showColor();

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板