圖解JS原型鏈中的三角戀

直接上圖！額(⊙o⊙)…，有點亂！不着急，讓咱們一步步來理解

首先先來明確這三個屬性的定義:

• prototype：指向原型對象（函數特有屬性）
• __proto__：指向構造該對象的構造函數的原型對象
• constructor：指回該原型對象中的構造函數

步驟分析：

1. f1,f2是構造函數Foo()實例化出來的對象，f1.__proto__指向其構造函數的原型對象，和其構造函數Foo.prototype指向的是同一個原型對象，同時原型對象能夠經過constructor指回構造函數（其餘構造函數同理）
2. Foo函數原型對象使用Foo.prototype.__proto__指向了對象類型的原型對象Object.prototype ：由於Foo原型對象自己也是一個對象，因此使用__proto__指向了對象構造函數Object()的原型對象Object.prototype
3. Object函數原型對象Object.prototype是初始化的原型對象了，因此該對象的構造函數的原型對象爲空nullObject.prototype.__proto__ == null，也就是找不到創造它的對象了
4. Object構造函數和其餘構造函數的區別就是它的原型對象就是兜底的Object.prototype
5. Foo.__proto__、Object.__proto__、Function.__proto__這些構造函數的構造函數都是Function(),因此它們的構造函數原型對象都是Function.prototype
6. Function構造函數的原型對象Function.prototype是經過Object構造函數建立的，因此其原型對象爲Object.prototype

小結

• __proto__屬性指向構造該對象的構造函數的原型對象：
  • 函數的__proto__都指向Object原型對象
  • 對象的__proto__都指向其構造函數的原型對象
• prototype屬性指向原型對象：
  • 只有函數纔有prototype屬性
  • 原型對象存在constructor的構造函數，該屬性指回其構造函數
• 函數同時也是一個對象：即：f.prototype.__proto__ == f.__proto__.__proto__也就是圖中的1+2 == 5+ 6，最終都是指向Object原型對象
• prototype、__proto__兩個最終都是指向同一個原型對象
• Object原型對象的__proto__的屬性值爲null

嘿嘿~當時，只有我和上帝兩我的知道寫的是什麼，而如今只有上帝一我的知道了！

參考連接：www.cnblogs.com/smoothLily/…