JavaScript面向對象程序設計三原型模式（上）

更新時間：2011年12月21日 21:02:10 作者：

在javaScript面向對象設計一和Javascript面向對象設計二中分別介紹了工廠模式和構造函數模式，以及他們格式的優(yōu)缺點，今天繼續(xù)講解原型模式

我們創(chuàng)建的每一個函數都有一個prototype（原型）屬性，該屬性是一個對象，包含可以有特定類型的所有實例共享的屬性和方法。使用它的好處就在于可以讓所有對象實例共享它所包含的屬性和方法，也就是說，不必在構造函數中定義對象的信息，而是可以將這些信息，直接添加在原型對象中，如下所示，還是接著改寫前兩篇日志中的例子：

復制代碼代碼如下:

 
function Employee() { 
}; 
Employee.prototype.Name = "Jim"; 
Employee.prototype.Age = 28; 
Employee.prototype.Job = "SoftWare Engineer"; 
Employee.prototype.SayName = function () { 
alert(this.Name); 
}; 
var employee1 = new Employee(); 
employee1.SayName();//Jim 
var emplayee2 = new Employee(); 
emplayee2.SayName(); //Jim 
alert(employee1.SayName = emplayee2.SayName);//true 

與構造函數模式不同的是，新對象的這些屬性和方法是由所有實例共享的。
以上即是原型模式的一個引子，要理解原型模式的工作原理，就需要了解ECMASCRIPT中原型的性質。
理解原型
在Javascript中，只要創(chuàng)建了一個新函數，就會根據一組特定的規(guī)則為該函數創(chuàng)建一個prototype屬性。在默認的情況下，雖有prototype屬性都會自動獲得一個constructor屬性，這個屬性包含一個指向prototype屬性所在函數的指針，而通過這個構造函數，我們還可以繼續(xù)為原型添加其他屬性和方法。
創(chuàng)建了自定義的構造函數之后，其原型屬性默認只會取得constructor屬性，而至于其他的方法，則都是從Object繼承來的。當調用構造函數創(chuàng)建一個新實例后，該實例的內部將包含一個指針（內部屬性），指向構造函數的原型屬性。要注意的是這個連接存在于實例和構造函數原型屬性之間，而不是存在于實例與構造函數之間。
在某些實現中，無法訪問到內部屬性（_proto_屬性），但是在所有實現中都可以通過isPrototypeOf方法來確定對象之間是否存在這種原型關系。從本質上來看，如果對象的_proto_屬性指向isPrototypeOf，這個方法就返回true。如下所示：

復制代碼代碼如下:

 
alert(Employee.prototype.isPrototypeOf(employee1)); //true 
alert(Employee.prototype.isPrototypeOf(employee2));//true 

每當代碼讀取某個對象的某個屬性時，都會執(zhí)行搜索，目標是具有給定名字的屬性。搜索最先從對象實例本身開始。如果在實例中找到具有給定名字的屬性，則然后該屬性的值，如果沒有找到，則繼續(xù)搜索指針指向的原型對象，在原型對象中查找具有給定名字的屬性。如果在原型對象中找到這個屬性，則返回該屬性的值。這也正是對個對象實例共享原型所保存的屬性和方法的基本原理。
前面說過，原型最初只包含constructor屬性，而該屬性也是共享的，因此可以通過對象實例訪問
雖然可以通過對象實例訪問保存在原型中的值，但是不能通過對象實例重寫原型中的值，如果我們在實例中添加一個屬性，而該屬性與實例原型中的一個屬性名稱相同，name在實例中創(chuàng)建的屬性會屏蔽（.net成為隱藏）原型中的那個屬性，如下所示：

復制代碼代碼如下:

 
function Employee() { 
}; 
Employee.prototype.Name = "Jim"; 
Employee.prototype.Age = 28; 
Employee.prototype.Job = "SoftWare Engineer"; 
Employee.prototype.SayName = function () { 
alert(this.Name); 
}; 
emplayee2.Name = "Sun"; 
alert(employee1.Name); //Jim 
alert(employee2.Name);//Sun 

其中employee1.Name的Jim來自原型，二employee2.Name的sun來自實例。

您可能感興趣的文章: