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

咱們接着上文繼續，咱們經過原型方式，解決了多個實例的方法共享問題，接下來，咱們就來搞清楚原型(prototype)，原型鏈的前因後果.

1         function CreateObj(uName) {
2             this.userName = uName;
3         }
4         CreateObj.prototype.showUserName = function(){
5             return this.userName;
6         }
7         var obj1 = new CreateObj('ghostwu');
8         var obj2 = new CreateObj('衛莊');

1，每一個函數都有一個原型屬性(prototype) ， 這個屬性是一個指針，指向構造函數的原型對象( CreateObj.prototype)， 如上圖中的第1根綠色的線

2，在默認狀況下，全部原型對象都會自動得到一個constructor屬性，該屬性的做用上文已經解釋過，該屬性包含一個指向prototype屬性所在的函數，如上圖的第2根綠色的線

3，全部的實例( 經過構造函數new出來的， 原型對象[ 如CreateObj.prototype, 上圖我尚未畫出來]等 )都包含一個隱式原型(__proto__)，該指針指向實例的構造函數的原型對象,

如上圖中的第3根線和第4根線. obj1的構造函數是CreateObj, CreateObj的原型對象是CreateObj.prototype, obj2同理，因此:

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

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

4，寫在構造函數中， 爲this賦值的屬性和方法， 在畫圖的過程當中，把他們畫在對象上面，如userName這個是給對象賦值的屬性，因此在obj1和obj2這兩個對象上都會存在一個屬性userName

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

CreateObj.prototype.showUserName = function(){

return this.userName;

}

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

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

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

若是實例上面不存在屬性和方法，就會沿着實例的__proto__指針指向的原型對象繼續往上查找，若是找不到，值就是undefined.

console.log( obj1.showUserName() ); //ghostwu

console.log( obj2.showUserName() ); //衛莊

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

若是，把CreateObj.prototype原型對象上的showUserName註釋掉，那麼obj1.showUserName和obj2.showUserName就會報錯

// CreateObj.prototype.showUserName = function(){

// return this.userName;

// }

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function(){
 4                 return '100';
 5             }
 6         }
 7         CreateObj.prototype.showUserName = function(){
 8             return this.userName;
 9         }
10 
11         var obj1 = new CreateObj('ghostwu');
12         var obj2 = new CreateObj('衛莊');
13 
14         console.log( obj1.showUserName() ); //100
15         console.log( obj2.showUserName() ); //100

 若是在構造函數中爲this添加一個showUserName方法， 那麼obj1和obj2就會直接調用this上面的，由於這兩個方法會被畫在圖中的實例上，因此：

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

如今，你應該能明白，把屬性和方法寫在構造函數的原型對象(prototype)上以後，能實現多個實例屬性和方法的共享的原理了吧

 

什麼是原型鏈?

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

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return '100';
 5             }
 6         }
 7         CreateObj.prototype.showUserName = function () {
 8             return this.userName;
 9         }
10 
11         console.log( CreateObj.prototype.__proto__ ); //指向Object.prototype
12         console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true

CreateObj.prototype.__proto__指向的是Object.prototype, 經過 全等運算符 (===) 測試以後爲true

Object.prototype.__proto__ 指向的是NULL

這就是原型鏈，經過隱式原型把一些構造函數層層的串起來，經過上面這個圖，就知道，爲何自定義的對象能調用toString, valueOf,等方法了吧？

由於全部的對象都是繼承自Object.