回歸JavaScript基礎（十）

主題：創建對象

原型模式

JavaScript中的每個對象都有一個prototype屬性（原型屬性），這個屬性是一個指針，指向一個對象，而這個對象可以由一些屬性和方法組成。被指向的對象，可以是多個對象的原型，這樣創建的對象就共用了一個原型對象。

 1 function Person() {
 2 }
 3 
 4 Person.prototype.name = "xuchaoi";
 5 Person.prototype.age = 24;
 6 Person.prototype.sayName = function() {
 7     alert(this.name);
 8 };
 9 
10 var person1 = new Person();
11 var person2 = new Person();
12 alert(person1.name === person2.name); //true

這裡可提煉一下，用更簡潔的方式實現。但需要註意contructor屬性的變化！

function Person() {
}
//註意：用下麵的方式的話Person.prototype的contructor屬性就指向對象{...}了，這裡通過設置contructor屬性去除不想要的結果
Person.prototype = {
    contructor: Person,
    name: "xuchaoi",
    age: 24,
    sayName: function() {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name === person2.name); //true

但這種模式存在一個很大的缺點，若共用的屬性中存在引用類型，就會存在一個對象該屬性修改後，所有對象的該屬性都被修改。

 1 function Person() {
 2 }
 3 Person.prototype.name = "xuchaoi";
 4 Person.prototype.friends = ["小明","小紅"];
 5 Person.prototype.sayName = function() {
 6     alert(this.name);
 7 };
 8 var person1 = new Person();
 9 var person2 = new Person();
10 person1.friends.push("小王");
11 alert(person2.friends);    //"小明，小紅，小王"

 為瞭解決這個問題，我們可以把構造函數與原型模式進行組合使用。不能共用的屬性放在構造函數中，原型模式中放一些共用的屬性。這是目前JavaScript中使用最為廣泛、認可度最高的一種創建自定義類型的方式。

 1 function Person(name, age) {
 2     this.name = name;
 3     this.age = age;
 4     this.friends = ["小紅", "小明"];
 5 }
 6 
 7 Person.prototype = {
 8     contructor : Person,
 9     sayName : function() {
10         alert (this.name);
11     }
12 }
13 var person1 = new Person("xu1", 20);
14 var person2 = new Person("xu2", 21);
15 person1.friends.push("小王");
16 alert(person1.friends);    //"小紅，小明，小王"
17 alert(person2.friends);    //"小紅，小明"

此外還有：

寄生構造函數模式（函數內部封裝一個創建對象過程，然後再返回這個創建的對象）

 1 function Person(name, age) {
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.sayName = function() {
 6         alert(this.name);
 7     };
 8     return o;
 9 }
10 var person1 = new Person("xuchaoi", 20);
11 person1.sayName();    //"xuchaoi"

穩妥構造函數模式（類似於寄生構造函數模式，但構造函數內部的創建對象過程中不使用this，不使用new來調用構造函數）

 1 function Person(name, age) {
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.sayName = function() {
 6         alert(name);
 7     };
 8     return o;
 9 }
10 var person1 = Person("xuchaoi", 20);
11 person1.sayName();    //"xuchaoi"