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

提起物件導向我們就能想到類，對象，封裝，繼承，多態。在《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();