淺談JavaScript中的原型模式

淺談JavaScript中的原型模式

在JavaScript中建立對象由很多種方式，如原廠模式、建構函式模式、原型模式等：

//原廠模式function createPerson(name,age,job){var o = new Object;o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);}return o;}var person = createPerson('dw',20,'IT');
其等價的原型模式：
function Person(){}Person.prototype = {name:"dw",age:20,job:"IT",sayName:function(){alert(this.name);}};var person2 = new Person;

    在Javascript中，每個函數都有prototype屬性，該屬性是一個指向原型對象的指標，可以用於建立所有執行個體共用的屬性的和方法。在原型模式下，在建立一個執行個體person3
var person3 = new Person;person2.name;  //dwperson3.name; //dw

person2和person3的name屬性都返回dw。原型對象的屬性和方法被所有特定類型的執行個體共用。在預設的情況下，每個原型對象會自動獲得一個constructor屬性，用於指向prototype屬性所在函數的指標，如Person.prototype.constructor指向Person
alert(Person.prototype.constructor);   //返回Person的建構函式//Person.prototype.constructor只是指向Person的一個指標，與Person並不相等//以下均返回falsealert(Person.prototype.constructor === Person)alert(Person.prototype.constructor == Person)

執行個體、原型對象、建構函式的三角戀關係如所示：
在每一個執行個體的內部都有一個指標指向原型對象，在ECMA-262的第五版稱之為[[prototype]]。在原型模式下建立的執行個體與建構函式沒有直接的關係。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGJyPgo8L3A+CjxwPiAgICAgy+TIu87et6i3w87KW1twcm90b3R5cGVdXaOstau/ydLU08Npc1Byb3RvdHlwZU9mKCm3vbeowLTIt7aottTP88rHt/HKx9St0M221M/zoaM8L3A+CjxwPjxwcmUgY2xhc3M9"brush:java;">alert(Person.prototype.isPrototypeOf(person2)); //truealert(Person.prototype.isPrototypeOf(person3));//true

因為在執行個體內部均有一個指向Person.prototype的指標，所以均返回true。在ECMAScript 5中，可以用Object.getPrototypeOf()返回[[prototype]]，即返回原型對象

alert(Object.getPrototypeOf(person2) == Person.prototype);  //truealert(Object.getPrototypeOf(person2).name); //dw

注意：雖然可以用執行個體訪問原型中的值，但是不能通過執行個體重寫原型中的值，即執行個體中添加了與原型中同名的屬性，則原型的同名屬性被屏蔽。

person2.name="qs";alert(person2.name);//qs

即使將name屬性設定為null，仍然不能訪問原型中的name。可以用delete刪除執行個體的name屬性，則可以重新訪問原型中的name.

person2.name = null;alert(person2.name);  //null
delete person2.name;alert(person2.name); //dw

    對於同名屬性，可以用hasOwnProperty("propertyName")方法檢測屬性是屬於執行個體還是原型，該方法只有在給定的屬性存在執行個體中時才返回true