javascript中創建對象的幾種不同方法

javascript中創建對象的幾種不同方法

方法一：最直白的方式：字面量模式創建

 1 <script>
 2     var person={
 3         name:"小明",
 4         age:20,
 5         sex:"男",
 6         hobby:function(){
 7             console.log("打籃球");
 8         }
 9     };
10 </script>

這種方法代碼量多，用於“一開始就確定好內部數據類型的”對象創建。

方法二：調用系統構造函數創建

1 <script>
2     var per=new Object();
3     per={};
4     per.name="小明";
5     per.age="20";
6     per.hobby=function(){
7         console.log("打籃球");
8     };
9 </script>

這種方法可以先調用Object來創建一個空的對象，然後動態地在後面添加對象需要的屬性，但是代碼量也很多。當創建一個跟它相似的對象時可能會重覆使用到添加屬性的代碼語句，不夠簡潔。

方法三：工廠模式創建

 1 <script>
 2     function createPerson(name,age){
 3         var p=new Object();
 4         p.name=name;
 5         p.age=age;
 6         p.hobby=function(){
 7             console.log("打籃球");
 8         };
 9     }
10     var person1=createPerson("小明","20");
11     var person2=createPerson("小米","18");
12 </script>

這種方法可以解決方法二的問題，即要創建多個相似的對象時只需要調用多次函數就好，但是工廠模式創建對象無法識別對象的類型，它們都是Object()構造函數創建，都是Object類型(所有的對象都是Object的後代)，不像其他方法Array()、Date()等.

方法四：自定義構造函數創建

構造函數就是一個普通的函數，創建方式和普通函數沒有區別，不同的是構造函數習慣上首字母大寫。另外就是調用方式的不同，普通函數是直接調用，而構造函數需要使用new關鍵字來調用。

 1 <script>
 2     function Person("name","age"){
 3         this.name=name;
 4         this.age=age;
 5         this.hobby=function(){
 6             console.log("打籃球");
 7         };
 8     }
 9     var person1=new Person("小明","20");
10     var person2=new Person("小米","18");
11 </script>

這種方法與工廠模式創建有幾個不同點：1.函數名Person是大寫，而工廠模式的函數creatPerson是小寫（習慣上這樣用而已）;2.該方法沒有return語句，而工廠函數創建有return；3.該方法直接將屬性和方法賦值給了this對象，而工廠模式沒有出現this對象；4.該方法通過new操作符來實例化一個對象，而工廠模式實例化對象直接調用函數即可。

要創建Person的新實例，必須使用new操作符。用這種方式調用構造函數實際上會經歷以下四個步驟：

1.創建一個新對象；2.將構造函數的作用域賦給新對象（因此this就指向了這個新對象）；3.為這個新對象添加屬性；4.返回新對象。

這種方法雖然好用，但也不是沒有問題。例如當你需要創建100個Person,這100個對象都是單獨的個體，它們之間的私有屬性是不相等的，當創建100個這樣的對象時，加入一個對象中有一個方法，那創建100個對象就要創建100個方法，但是這些方法都是一樣的功能，就沒有這個必要去浪費記憶體空間。所以開始就有了下麵的方法五了。

方法五：原型模式創建對象

原型模式有一個強大的功能就是可以實現數據共用，從而節省空間，比如上面的100個對象有100個功能一樣的方法，那我完全可以讓這100個對象共用一個方法。

 1 <script>
 2     function Person(name,age)
 3     {
 4     this.name=name;
 5     this.age=age;
 6     }
 7     Person.prototype.eat=function()
 8     {
 9     console.log("吃東西");
10     }
11     var p1=new Person("小米",30);
12     var p2=new Person("小明",20);
13 </script>

如上需要共用的數據就可以寫在原型對象(prototype)中，不需要共用的數據寫在構造函數Person中,

以後用new Person創建的每一個對象，都可以享用到prototype裡面的屬性和方法，而構造函數Person里的屬性和方法則根據創建對象時傳入的參數不同來決定。

 1   <script>
 2  2             function Student(name,age,sex){
 3  3                 this.name=name;
 4  4                 this.age=age;
 5  5                 this.sex=sex;
 6  6             }
 7  7             Student.prototype={
 8  8                 constructor:Student,
 9  9                 height:"180",
10 10                 weight:"55kg",
11 11                 study:function(){
12 12                     console.log("學習好開心");
13 13                 },
14 14                 eat:function(){
15 15                     console.log("好好吃");
16 16                 }
17 17             };
18 18             var stu=new Student("張飛",20,"男");
19 19             stu.eat();//好好吃
20 20             stu.study();//學習好開心
21 21  </script>    

關於構造函數、原型對象、實例對象的指向關係，表述如下：

構造函數可以實例化對象；
構造函數中有一個屬性叫prototype,是構造函數的原型對象;
構造函數的原型對象(prototype)中有一個constructor構造器,這個構造器指向的就是自己所在的原型對象所在的構造函數；
實例對象的隱含屬性(__proto__)指向的是該構造函數創造的原型對象；

以上資料，部分參考自《javaScript高級語言程式設計（第三版）》，如有錯誤，並無誤導之意，請前輩不吝指出！感謝！