? ??我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，它的用途是包含可以有特定類(lèi)型的所有實(shí)例共享的屬性和方法。

? ??prototype就是通過(guò)構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象的原型對(duì)象。使用原型的好處就是可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法 。

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

1、理解原型對(duì)象

? ? 無(wú)論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，ECMAScript就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor（構(gòu)造函數(shù)）屬性，這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針。就拿前面的例子，Person.prototype.constructor指向Person。而通過(guò)這個(gè)構(gòu)造函數(shù)，我們還可以繼續(xù)為原型對(duì)象添加其他屬性和方法。 ? ? 創(chuàng)建了自定義指針之后，其原型對(duì)象默認(rèn)只會(huì)取得constructor屬性；至于其它方法，都會(huì)從Object對(duì)象繼承而來(lái)。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例之后，該實(shí)例的內(nèi)部將包括一個(gè)指針（內(nèi)部屬性），指向構(gòu)造函數(shù)的原型對(duì)象。ECMA-262第5版中管這個(gè)叫[[Prototype]]。 ? ? 要明確一點(diǎn)的就是，這個(gè)連接存在于實(shí)例和構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例和構(gòu)造函數(shù)之間。 ? ? 以前面使用的Person構(gòu)造函數(shù)和Person.prototype創(chuàng)建實(shí)例的代碼為例，如下圖： ? ? 上圖展示了Person構(gòu)造函數(shù)、Person的原型屬性以及Person現(xiàn)有的兩個(gè)實(shí)例之間的關(guān)系。在此，Person.prototype指向了原型對(duì)象，而Person.prototype.constructor又指回了Person。原型對(duì)象中除了包含constructor屬性之外，還包括后來(lái)添加的其他屬性。Person的每一個(gè)實(shí)例——person1和person2都包含一個(gè)內(nèi)部屬性，該屬性?xún)H僅指向Person.prototype。換句話(huà)說(shuō)，它們與構(gòu)造函數(shù)沒(méi)有直接的聯(lián)系。此外，要格外注意的是，雖然這兩個(gè)實(shí)例都不包含屬性和方法，但我們卻可以調(diào)用person1.sayName()。這是通過(guò)查找對(duì)象屬性的過(guò)程來(lái)實(shí)現(xiàn)的。 ? ? 雖然我們無(wú)法訪(fǎng)問(wèn)到[[Prototype]]，但可以通過(guò)isPrototypeOf()方法來(lái)確定對(duì)象之間是否存在這種關(guān)系。從本質(zhì)上講，如果[[Prototype]]指向調(diào)用isPrototypeOf()方法的對(duì)象（Person.prototype）,那么這個(gè)方法就會(huì)返回true。 alert(Person.prorotype.isPrototypeOf(person1)); //true alert(Person.prorotype.isPrototypeOf(person2)); //true ? ? 每當(dāng)代碼要讀取某個(gè)對(duì)象的屬性時(shí)，都會(huì)進(jìn)行一次搜索，搜索目標(biāo)是具有給定名稱(chēng)的屬性。搜索當(dāng)然先從對(duì)象實(shí)例的本身開(kāi)始，如果找到了，就可以返回該值了；如果找不到，則會(huì)去指針?biāo)赶虻脑蛯?duì)象中去查找，在原型對(duì)象中找到了，就可以順利返回該值。而這正是多個(gè)對(duì)象實(shí)例共享原型所保存的屬性和方法的基本原理。 ? ??雖然可以通過(guò)對(duì)象實(shí)例訪(fǎng)問(wèn)到保存在原型中的值，但不能通過(guò)對(duì)象實(shí)例重寫(xiě)原型中的值。根據(jù)查找原理，如果找到了實(shí)例中的值，就不會(huì)再去查找原型對(duì)象中的值。，代碼如下所示： function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person(); person1.name = "Greg"; alert(person1.name); //Greg 來(lái)自實(shí)例 alert(person2.name); //zxj 來(lái)自原型 delete person1.name; //刪除實(shí)例中的name屬性 alert(person1.name); //zxj 來(lái)自原型 　使用hasOwnPeoperty()方法可以檢測(cè)一個(gè)屬性是否存在于實(shí)例中，還是存在原型中，這個(gè)方法(它是從Object繼承來(lái)的)只在給定屬性存在域?qū)ο髮?shí)例中時(shí)，才返回true。 function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person(); alert(person1.hasOwnProperty("name")); //false person1.name = "Greg"; alert(person1.name); //Greg 來(lái)自實(shí)例 alert(person1.hasOwnProperty("name")); //true alert(person2.name); //zxj 來(lái)自原型 alert(person2.hasOwnProperty("name")); //false delete person1.name; alert(person1.name); //zxj 來(lái)自原型 alert(person1.hasOwnProperty("name")); //false

?

2、原型與in操作符

? ??有兩種方式使用in操作符：一、單獨(dú)使用；二、for-in中使用。 ? ??功能：會(huì)在通過(guò)對(duì)象能夠訪(fǎng)問(wèn)給定屬性時(shí)返回true，無(wú)論是在對(duì)象實(shí)例中或是原型中。 function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person();alert(person1.hasOwnProperty("name")); //false alert("name" in person1); //true person1.name = "Greg";alert(person1.name); //Greg 來(lái)自實(shí)例 alert(person1.hasOwnProperty("name")); //true alert("name" in person1); //true alert(person2.name); //zxj 來(lái)自原型 alert(person2.hasOwnProperty("name")); //false alert("name" in person2); //truedelete person1.name; alert(person1.name); //zxj 來(lái)自原型 alert(person1.hasOwnProperty("name")); //false alert("name" in person1); //true alert(person1.hasOwnProperty("qqqq")); //false alert("qqqq" in person1); //false ? ??同時(shí)使用hasOwnProperty()和in操作符可以判斷出該屬性到底是存在對(duì)象實(shí)例中還是存在與原型中。 ? ??使用for-in循環(huán)時(shí)，返回的是所有能夠通過(guò)對(duì)象訪(fǎng)問(wèn)的，可枚舉(enumerated)屬性，其中即包括存在與實(shí)例中的屬性，也包括存在與原型中的屬性。根據(jù)規(guī)定，開(kāi)發(fā)人員定義的屬性都是可枚舉的——IE8及更早版本除。 var o = {toString: function () {return "My Object";} } for (var prop in o) {if (prop == "toString") {alert("Found toString"); //在IE中不會(huì)顯示(IE9(未測(cè)試)和IE10(已測(cè)試)可用) } }

?

3、更簡(jiǎn)單的原型語(yǔ)法

? ? 我們可以用一個(gè)包含屬性和方法的對(duì)象字面量重寫(xiě)整個(gè)原型對(duì)象。 function Person(){ }Person.peototype={name:"zxj",age:29,job:"Software Engineer",sayName:function(){alert(this.name);} }; ? ??結(jié)果是與先前的相同，但有一個(gè)是不同的：contrcutor屬性不再指向Person了。我們?cè)?jīng)介紹過(guò)，沒(méi)創(chuàng)建一個(gè)函數(shù)，就會(huì)同時(shí)創(chuàng)建它的prototype對(duì)象，這個(gè)對(duì)象也會(huì)自動(dòng)獲得constructor屬性。而我們這樣寫(xiě)，本質(zhì)上是完全重寫(xiě)了默認(rèn)的prototype對(duì)象，因此constructor屬性也就變成了新對(duì)象的constructor屬性（指向Object構(gòu)造函數(shù)），不再指向Person函數(shù)。 ? ??當(dāng)然我可以將它特意設(shè)置成適當(dāng)?shù)闹?#xff1a; function Person() { }Person.prototype = {constructor: Person,name: "zxj",age: 29,sayName: function () {alert(this.name);} }; ? ? 以上代碼特意包含了一個(gè)constructor屬性，并將它的值設(shè)置為Person，從而確保了通過(guò)該屬性能夠訪(fǎng)問(wèn)到適當(dāng)?shù)闹怠?/span> ? ? 注意，以這種方式重設(shè)constructor屬性會(huì)導(dǎo)致它的[[Enumerable]]特性被設(shè)置為true。默認(rèn)情況下，constructor屬性是不可枚舉的。因此如果你使用兼容ECMASCript5的JavaScript引擎，可以試一試Object.definePropety()。 function Person() { }Person.prototype = {constructor: Person,name: "zxj",age: 29,sayName: function () {alert(this.name);} };Object.defineProperty(Person.prototype,"constructor",{enumerable:false,value:Person });

4、原型的動(dòng)態(tài)性

? ? 由于在原型中查找值的過(guò)程是一次搜索，因此我們對(duì)原型對(duì)象所做的任何修改都能夠立即從實(shí)例上反映出來(lái)——即使是先創(chuàng)建了實(shí)例后修改原型也照樣可以，如下所示： function Person() { }var friend = new Person();Person.prototype.sayHi = function () {alert("hi"); }friend.sayHi(); //"hi" ? ? 盡管可以隨時(shí)為原型添加屬性和方法，但如果我們重寫(xiě)了整個(gè)原型對(duì)象，那么情況就不一樣了。我們知道，調(diào)用構(gòu)造函數(shù)時(shí)會(huì)為實(shí)例添加一個(gè)指向最初原型的[[Prototype]]指針，而把原型修改為另一個(gè)對(duì)象就等于切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。一定要記住：實(shí)例中的指針僅僅指向原型，而不是構(gòu)造函數(shù)。如下例子： function Person() { }var friend = new Person();Person.prototype = {constructor: Person,name: "zxj",age: 29,job: "Software Engineer",sayName: function () {alert(this.name);} };friend.sayName(); //error 找不到該方法 、

5、原生對(duì)象的原型

? ? 原型模式的重要性不僅體現(xiàn)在創(chuàng)建自定義類(lèi)型方面，就連所有原生的引用類(lèi)型，都是采用這種模式創(chuàng)建的。所有引用類(lèi)型（Object、Array、String，等等）都在構(gòu)造函數(shù)的原型上定義了方法。例如，在Array.prototype中可以找到sort()方法，而在String.prototype中可以找到substring()方法，如下所示： alert(typeof Array.prototype.sort); //"function" alert(typeof String.prototype.substring); //"function" ? ? 通過(guò)原生對(duì)象的原型，不僅可以取得所有默認(rèn)方法的引用，而且也可以定義新方法。如下所示： String.prototype.startWith = function (text) {return this.indexOf(text) == 0; }var msg = "Hello World";alert(msg.startWith("Hello")); //true

6、原型對(duì)象的問(wèn)題

? ? 原型模式的缺點(diǎn)。首先，它省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)，結(jié)果所有的實(shí)例在默認(rèn)情況下都取得了相同的值。原型模式最大的問(wèn)題是由其共享的本性所導(dǎo)致的。 Person.prototype = {constructor: Person,name: "zxj",age: 29,job: "Software Engineer",friends: ["saly", "geil"],sayName: function () {alert(this.name);} };var person1 = new Person(); var person2 = new Person();person1.friends.push("van");alert(person1.friends); //"saly","geil","van" alert(person2.friends); //"saly","geil","van" alert(person1.friends === person2.friends) //問(wèn)題出來(lái)了，person1結(jié)交了新朋友意味著person2也必須結(jié)交這個(gè)朋友 ? ? 我們可以看到，當(dāng)一個(gè)對(duì)象想獲取獨(dú)有的操作時(shí)，原型模式的共享就是最大的阻礙。 ?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zxj159/archive/2013/05/20/3089513.html

總結(jié)

以上是生活随笔為你收集整理的Javascript之创建对象（原型模式）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。