關於JS中原型鏈中的prototype與_proto_的我的理解與詳細總結

轉載自：https://www.cnblogs.com/az96/p/6014621.html

一直認爲原型鏈太過複雜，尤爲看過某圖後被繞暈了一整子，今天清理硬盤空間（渣電腦），偶然又看到這圖，勾起了點回憶，因而索性複習一下原型鏈相關的內容，表達能力欠缺邏輯混亂別見怪（爲了防止新人__（此處指我）__被在此繞暈，圖片就放在末尾了。）

如下三點須要謹記

 

1.每一個對象都具備一個名爲__proto__的屬性；

2.每一個構造函數（構造函數標準爲大寫開頭，如Function()，Object()等等JS中自帶的構造函數，以及本身建立的）都具備一個名爲prototype的方法（注意：既然是方法，那麼就是一個對象（JS中函數一樣是對象），因此prototype一樣帶有__proto__屬性）；

3.每一個對象的__proto__屬性指向自身構造函數的prototype；

 

直接上代碼.....

function Fun(){
            }
//            我創造了一個函數Fn
//            這個函數由Function生成（Function做爲構造函數）
            var fn=new Fun()
//            我建立了一個函數fn
//            這個函數由Fn生成（Fn做爲構造函數)
            
            
            console.log(fn.__proto__===Fun.prototype)    //true
//            fn的__proto__指向其構造函數Fun的prototype
            console.log(Fun.__proto__===Function.prototype)        //true
//            Fun的__proto__指向其構造函數Function的prototype
            console.log(Function.__proto__===Function.prototype)    //true
//            Function的__proto__指向其構造函數Function的prototype
//            構造函數自身是一個函數，他是被自身構造的
            console.log(Function.prototype.__proto__===Object.prototype)    //true
//            Function.prototype的__proto__指向其構造函數Object的prototype
//            Function.prototype是一個對象,一樣是一個方法,方法是函數,因此它必須有本身的構造函數也就是Object
            console.log(Fun.prototype.__proto__===Object.prototype)         //true
//             與上條相同
//             此處能夠知道一點,全部構造函數的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)
            console.log(Object.__proto__===Function.prototype)        //true
//            Object做爲一個構造函數(是一個函數對象!!函數對象!!),因此他的__proto__指向Function.prototype
            console.log(Object.prototype.__proto__===null)        //true
//            Object.prototype做爲一切的源頭,他的__proto__是null

//            下面是一個新的,額外的例子

            var obj={}
//            建立了一個obj
            console.log(obj.__proto__===Object.prototype)        //true
//            obj做爲一個直接以字面量建立的對象，因此obj__proto__直接指向了Object.prototype，而不須要通過Function了！！

//            下面是根據原型鏈延伸的內容
//            還有一個上文並未提到的constructor,  constructor在原型鏈中,是做爲對象prototypr的一個屬性存在的,它指向構造函數（因爲主要講原型鏈，這個就沒在乎、）；

            console.log(obj.__proto__.__proto__===null)        //true
            console.log(obj.__proto__.constructor===Object)        //true
            console.log(obj.__proto__.constructor.__proto__===Function.prototype)        //true
            console.log(obj.__proto__.constructor.__proto__.__proto__===Object.prototype)    //true    
            console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null)        //true
            console.log(obj.__proto__.constructor.__proto__.__proto__.constructor.__proto__===Function.prototype)    //true
            
            
//            以上，有興趣的能夠一一驗證　　F12搞起.

 

prototype是構造函數獨有的屬性；

對象的__prototype__屬性一般與其構造函數的prototype屬性相互對應；

全部構造函數的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)；

 

須要注意的指向是

Function的__proto__指向其構造函數Function的prototype；

Object做爲一個構造函數(是一個函數對象!!函數對象!!),因此他的__proto__指向Function.prototype；

Function.prototype的__proto__指向其構造函數Object的prototype；

Object.prototype的__prototype__指向null（盡頭）；

 

原型鏈經常使用於繼承相關的操做.

 

在文章結構順便附送上倆個與原型鏈相關的方法....歡迎食用

1.

hasOwnProperty判斷一個對象是否有名稱的屬性或對象，此方法沒法檢查該對象的原型鏈中是否具備該屬性，該屬性必須是對象自己的一個成員。 

若是該屬性或者方法是該 對象自身定義的而不是器原型鏈中定義的 則返回true;不然返回false; 

格式以下： 

 

object.hasOwnProperty(proName); 　　
括號內必需要加引號，而且直接寫入屬性名

 

2.

 

isPrototypeOf是用來判斷指定對象object1是否存在於另外一個對象object2的原型鏈中，是則返回true，不然返回false。 

格式以下： 

object1.isPrototypeOf(object2); 

object1是一個對象的實例； 

object2是另外一個將要檢查其原型鏈的對象。 

原型鏈能夠用來在同一個對象類型的不一樣實例之間共享功能。 

若是 object2 的原型鏈中包含object1，那麼 isPrototypeOf 方法返回 true。 

若是 object2 不是一個對象或者 object1 沒有出如今 object2 中的原型鏈中，isPrototypeOf 方法將返回 false。

附圖：

 

理解了上面兩條鏈之後，這兩個全圖實際上就不難理解了。分享一下，怎麼來讀懂這個圖：

• 首先看構造函數鏈。全部的普通對象，constructor 都會指向它們的構造函數；而構造函數也是對象，它們最終會一級一級上溯到 Function 這個構造函數。Function 的構造函數是它本身，也即此鏈的終結；
• Function 的 prototype 是 Function.prototype，它是個普通的原型對象；
• 其次看原型鏈。全部的普通對象，__proto__ 都會指向其構造函數的原型對象 [Class].prototype；而全部原型對象，包括構造函數鏈的終點 Function.prototype，都會最終上溯到 Object.prototype，終結於 null。

也便是說，構造函數鏈的終點 Function，其原型又融入到了原型鏈中：Function.prototype -> Object.prototype -> null，最終抵達原型鏈的終點 null。至此這兩條契合到了一塊兒。