[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例

我們通過原型方式，解決了多個實例的方法共享問題，接下來，我們就來搞清楚原型(prototype)，原型鏈的來龍去脈。

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，每個函數(shù)都有一個原型屬性(prototype) ， 這個屬性是一個指針，指向構(gòu)造函數(shù)的原型對象( CreateObj.prototype)， 如上圖中的第1根綠色的線

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

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

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

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

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

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

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

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

showUserName這個方法就要畫在圖中CreateObj.prototype上面

6，當一個對象訪問屬性和方法的時候，他的訪問規(guī)則叫（就近原則）, 規(guī)則如下：

當實例上面，存在屬性或者方法時，直接用實例上面的，

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

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

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

如果，把CreateObj.prototype原型對象上的showUserName注釋掉，那么obj1.showUserName和obj2.showUserName就會報錯

// 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添加一個showUserName方法， 那么obj1和obj2就會直接調(diào)用this上面的，因為這兩個方法會被畫在圖中的實例上，所以：

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

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

什么是原型鏈？

在前面，我有說過，所有的實例（包括原型對象）都有一個隱式原型__proto__，那么CreateObj.prototype這個原型對象，他的__proto__指向誰呢？

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, 通過 全等運算符 (===) 測試之后為true

Object.prototype.__proto__ 指向的是NULL

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

因為所有的對象都是繼承自O(shè)bject.

以上這篇[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com