Javascript 中建立自訂物件的方法總結_javascript技巧

Javascript 中建立對象，可以有很多種方法。

Object建構子/物件字面量：

拋開設計模式不談，使用最基本的方法，就是先呼叫Object構造函數來建立一個對象，然後再為對象加入屬性.

複製程式碼 程式碼如下:

     var student = new Object();
     student.name = "xiao ming";
     student.age = 20;
     student.getName = function () {
         alert(this.name);
     }

熟悉javascript 物件字面量的同學，可以換一個更好的寫法，至少看起來更簡潔。

複製程式碼 程式碼如下:

    var student = {
        name: "xiao hong",
        age: 18,
        getName: function () {
            alert(this.name);
        }
    };

 缺點：上面方法有個缺點就是，使用同一個介面建立許多類似的物件時，會產生大量重複的程式碼。這個應該很容易理解了，函數（方法或類別）一般是用來創建公共的方法，上面的物件創建過程，根本沒有函數的影子，所以談不上什麼重用。

工廠模式：

工廠模式 抽象化了具體創建物件的過程。就像一個黑盒，你只要呼叫函數（進入工廠），並且傳入對應參數（各種原料），就會出來對應的物件（工廠生產的產品）。工廠模式解決了創建多個相似物件的問題。

複製程式碼 程式碼如下:

     function studentFactory(name,age) {
         var student = new Object();
         student.name = name;
         student.age = age;
         student.sayName = function () {
             alert(this.name);
         }
         return student;
     }
     var p1 = studentFactory("ming", 20);
     var p2 = studentFactory("hong", 18);

缺點：工廠模式也有缺點，最大的缺點就是 物件類型辨識的問題。只能判斷出物件是Object 類型（p1 instanceof Object），而無法具體判斷出來是哪種類型。使用工廠模式創建出來的student 其實都有類似的屬性和方法，只是值不同而已。這時 更好的解決方法是，建立一個Student 函數，讓所有的物件都屬於 Student 類型。所以工廠模式不是不好，只是 建構函式模式比較優。

自訂類型的建構子：

建構子可以用來建立特定類型的物件。

複製程式碼 程式碼如下:

     function Student(name,age) {
         this.name = name;
         this.age = age;
         this.sayName = function () {
             alert(this.name);
         }
     }
     var p3 = new Student("ming", 20);
     var p4 = new Student("hong", 18);
     alert(p3 instanceof Student);
　　　　alert(p3.sayName==p4.sayName); //false

缺點：自訂建構函式的缺點就是，每個物件都會重新創建自己的方法，其實這些方法功能是一樣的（像sayName）,但是它們卻不相同(p3.sayName 和p4.sayName不相等)。

原型模式：

定義一個空函數，然後把所有屬性和方法都加到原型上，這樣所有的 物件都會共用這些屬性和方法。

複製程式碼 程式碼如下:

     function Student() {};
     Student.prototype.name = "ming";
     Student.prototype.age = 20;
     Student.prototype.friends = ['qi'];
     Student.prototype.sayName = function () {
         alert(this.name);
     };

缺點：有些屬性不能共享，共享回來帶來問題，例如：friends。每位同學的friends 大多不會一樣。

建構子與原型的組合：

複製程式碼 程式碼如下:

     function Student(name, age, friends) {
         this.name = name;
         this.age = age;
         this.friends = friends;
     }
     Student.prototype = {
         constructor: Student,
         sayName: function () {
             alert(this.name);
         }
     };

總結：建構函式與原型的組合 是一種廣受認可的創建自訂類型的方法。 也是上面這些方法中的最優方法。

/************************************************** **** **** ****************************************** ******** ****** *********/

其實上面的創建物件的方法已經很多了，但是還是有可能出現一些比較特殊的場景，需要繼續的優化。

動態原型模式：

它是建構函式與原型組合 的一種最佳化。對於那些共用的屬性和方法，如果初始化之後，就不必再重複初始化，提高效率。

複製程式碼 程式碼如下:

       function Student(name, age) {
           this.name = name;
           this.age = age;
           if ((typeof this.sayName) != "function") {
               Student.prototype.sayName = function () {
                   alert(this.name);
               }
           }
       }
       var stu = new Person("ming", 20);
       //alert(stu instanceof Student);
       stu.sayName();
　　　　　　var stuNew = new Person("hong", 18);
　　　　　　//alert(stuNew instanceof Student);
　　　　　　stuNew.sayName();

當建立多個student物件時，sayName 方法只會初始化一次。

最後還有一種很有用的創建物件的方式，就是穩健建構子。

穩健建構子模式：

在這個模式中會禁止使用this和new，所有物件都沒有公共的屬性。只能讀取變數的值，而不能修改。

複製程式碼 程式碼如下:

      ////穩健建構函數模式
      function Student(name, age) {
          var o = new Object();
          o.sayName = function () {
              alert(name);
          }
          return o;
      }
      var stu = Student("ming", 21);
      stu.sayName();

以上總結了幾種常見的Javascript創建自訂物件的方法，非常的全面，大家如有更好的，請聯絡我，本文持續更新。