JavaScript如何使用原型模式建立物件實例用法詳解

原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

範例中每新增一個屬性和方法就要敲一次Person.prototype。為減少不必要的輸入，也為了從視覺上更好地封裝原型的功能，更常見的做法是用一個包含所有屬性和方法的對象字面量來重寫整個原型對象，如下面的例子所示。

function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

在上面的程式碼中，我們將Person.prototype 設定為等於一個以物件字面量形式建立的新物件。最終結果相同，但有一個例外：constructor 屬性不再指向Person 了。前面曾經介紹過，每建立一個函數，就會同時建立它的prototype 對象，這個物件也會自動取得constructor 屬性。而我們在這裡使用的語法，本質上完全重寫了預設的prototype 對象，因此constructor 屬性也就變成了新物件的constructor 屬性（指向Object 建構子），不再指向Person 函式。此時，儘管instanceof操作符還能傳回正確的結果，但透過constructor 已經無法確定物件的類型了，如下所示。

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

在此，用instanceof 運算子測試Object 和Person 仍然傳回true，但constructor 屬性則等於Object 而不等於Person 了。如果constructor 的值真的很重要，可以像下面這樣特意將它設定回適當的值。

function Person(){
}
 Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

要注意一點就是：實例中的指標只指向原型，而不指向建構子。

原型物件的問題：原型模式也不是沒有缺點。首先，它省略了為建構函式傳遞初始化參數這一環節，結果所有實例在預設情況下都會取得相同的屬性值。雖然這會在某種程度上帶來一些不方便，但還不是原型的最大問題。原型模式的最大問題是由其共享的本質所導致的。

function Person(){
}
Person.prototype = {
 constructor: Person,
 name : "Nicholas",
 age : 29,
 job : "Software Engineer",
 friends : ["Shelby", "Court"],
 sayName : function () {
 alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

以上是JavaScript如何使用原型模式建立物件實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！