我們通過(guò)原型方式，解決了多個(gè)實(shí)例的方法共享問(wèn)題，接下來(lái)，我們就來(lái)搞清楚原型(prototype)，原型鏈的來(lái)龍去脈。

function CreateObj(uName) {   this.userName = uName;  }  CreateObj.prototype.showUserName = function(){   return this.userName;  }  var obj1 = new CreateObj('ghostwu');  var obj2 = new CreateObj('衛(wèi)莊');

1，每個(gè)函數(shù)都有一個(gè)原型屬性(prototype) ， 這個(gè)屬性是一個(gè)指針，指向構(gòu)造函數(shù)的原型對(duì)象( CreateObj.prototype)， 如上圖中的第1根綠色的線(xiàn)

2，在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor屬性，該屬性的作用上文已經(jīng)解釋過(guò)，該屬性包含一個(gè)指向prototype屬性所在的函數(shù)，如上圖的第2根綠色的線(xiàn)

3，所有的實(shí)例( 通過(guò)構(gòu)造函數(shù)new出來(lái)的， 原型對(duì)象[ 如CreateObj.prototype, 上圖我還沒(méi)有畫(huà)出來(lái)]等 )都包含一個(gè)隱式原型(__proto__)，該指針指向?qū)嵗臉?gòu)造函數(shù)的原型對(duì)象,

如上圖中的第3根線(xiàn)和第4根線(xiàn). obj1的構(gòu)造函數(shù)是CreateObj, CreateObj的原型對(duì)象是CreateObj.prototype, obj2同理，所以:

obj1.__proto__ === CreateObj.prototype //true

obj2.__proto__ === CreateObj.prototype //true

4，寫(xiě)在構(gòu)造函數(shù)中， 為this賦值的屬性和方法， 在畫(huà)圖的過(guò)程中，把他們畫(huà)在對(duì)象上面，如userName這個(gè)是給對(duì)象賦值的屬性，所以在obj1和obj2這兩個(gè)對(duì)象上都會(huì)存在一個(gè)屬性u(píng)serName

5，寫(xiě)在原型對(duì)象上的方法或者屬性，應(yīng)該把他們畫(huà)在原型對(duì)象上，如

CreateObj.prototype.showUserName = function(){return this.userName;}

showUserName這個(gè)方法就要畫(huà)在圖中CreateObj.prototype上面

6，當(dāng)一個(gè)對(duì)象訪問(wèn)屬性和方法的時(shí)候，他的訪問(wèn)規(guī)則叫（就近原則）, 規(guī)則如下：

當(dāng)實(shí)例上面，存在屬性或者方法時(shí)，直接用實(shí)例上面的，

如果實(shí)例上面不存在屬性和方法，就會(huì)沿著實(shí)例的__proto__指針指向的原型對(duì)象繼續(xù)往上查找，如果找不到，值就是undefined.

console.log( obj1.showUserName() ); //ghostwuconsole.log( obj2.showUserName() ); //衛(wèi)莊

在obj1,obj2上面是不存在showUserName這個(gè)方法的，所以會(huì)順著__proto__查找到CreateObj.prototype原型對(duì)象上的showUserName方法

如果，把CreateObj.prototype原型對(duì)象上的showUserName注釋掉，那么obj1.showUserName和obj2.showUserName就會(huì)報(bào)錯(cuò)

// CreateObj.prototype.showUserName = function(){// return this.userName;// }

function CreateObj(uName) {   this.userName = uName;   this.showUserName = function(){    return '100';   }  }  CreateObj.prototype.showUserName = function(){   return this.userName;  }  var obj1 = new CreateObj('ghostwu');  var obj2 = new CreateObj('衛(wèi)莊');  console.log( obj1.showUserName() ); //100  console.log( obj2.showUserName() ); //100

如果在構(gòu)造函數(shù)中為this添加一個(gè)showUserName方法， 那么obj1和obj2就會(huì)直接調(diào)用this上面的，因?yàn)檫@兩個(gè)方法會(huì)被畫(huà)在圖中的實(shí)例上，所以：

console.log( obj1.showUserName === obj2.showUserName ); //false

現(xiàn)在，你應(yīng)該能明白，把屬性和方法寫(xiě)在構(gòu)造函數(shù)的原型對(duì)象(prototype)上之后，能實(shí)現(xiàn)多個(gè)實(shí)例屬性和方法的共享的原理了吧

什么是原型鏈？

在前面，我有說(shuō)過(guò)，所有的實(shí)例（包括原型對(duì)象）都有一個(gè)隱式原型__proto__，那么CreateObj.prototype這個(gè)原型對(duì)象，他的__proto__指向誰(shuí)呢？

function CreateObj(uName) {   this.userName = uName;   this.showUserName = function () {    return '100';   }  }  CreateObj.prototype.showUserName = function () {   return this.userName;  }  console.log( CreateObj.prototype.__proto__ ); //指向Object.prototype  console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true

CreateObj.prototype.__proto__指向的是Object.prototype, 通過(guò) 全等運(yùn)算符 (===) 測(cè)試之后為true

Object.prototype.__proto__ 指向的是NULL

這就是原型鏈，通過(guò)隱式原型把一些構(gòu)造函數(shù)層層的串起來(lái)，通過(guò)上面這個(gè)圖，就知道，為什么自定義的對(duì)象能調(diào)用toString, valueOf,等方法了吧？

因?yàn)樗械膶?duì)象都是繼承自O(shè)bject.

以上這篇[js高手之路]圖解javascript的原型(prototype)對(duì)象,原型鏈實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。