深入__proto__和prototype的區別和聯繫

前話

有一個一個裝逼的同事，寫了一段代碼

function a(){}
a.__proto__.__proto__.__proto__

然後問我，下面這個玩意a.__proto__.__proto__.__proto__是啥，然後我一臉懵逼，prototype還知道一點，這個__proto__，還來三個，是個什麼鬼。於是我一直不能放下這個問題，雖然我很懶，很不喜歡費腦子，但是這個坎還是過不去，最近兩天研究了大半天，就有了這篇文章。
我先說出答案， 上面的值爲 null。我還很負責的告訴你，下面的_a.__proto__.__proto__.__proto__也是null

function a(){}
var _a = new a();
_a.__proto__.__proto__.__proto__

先來一張非常經典的圖，真的是非常經典，你看懂他，你就懂了整個世界，然後整個世界就等着你去拯救整個世界。
)

正文之前，__proto__和prototype

都誰有的問題

typeof === object的有__proto__ , null和undefined都沒有
typeof === function的有__proto__和prototype

__proto__ 是什麼
__proto__ 一般情況指向的是該對象的構造函數的prototype，一般情況，因爲還有很二般的情況。
先來看個簡單的例子, 下面的輸出是true

function a(){}
var _a = new a()
console.log(_a.__proto__ === a.prototype)

那我問_a.__proto__.__proto__爲什麼呢，你會這麼推導麼，
依據上面_a.__proto__ === a.prototype,那麼_a.__proto__.__proto__就等同a.prototype.__proto__ ， 那麼我們就再推到等於 a.prototype.constructor.prototype,然後你去一比，結果是false。

_a.__proto__.__proto__  === a.prototype.constructor.prototype  
// false

幾條規則
這個先不糾結， 我們先看看上圖，我們先得知道或者記住這幾個規則

1. Object.prototype.__proto__ === null
   不要糾結，鐵律
2. Object.__proto__ === Function.prototype
   Object,Number, Error等等這些函數都是Function創建的，下面就說明
   這些的constructor就是Function，這裏比較有意思的就是 Function.constructor也是Function。
   那就有Object.__proto__ === Function.prototype === Function.__proto__

Object.constructor.prototype  === Function.prototype  
// true
Function.constructor === Function
// true

1. Function.prototype.__proto__ === Object.prototype
   這個就是這樣的設計，

Function.prototype.constructor === Object 
// false

1. 自定義函數，沒有修改默認原型的情況下，比如 function Person(){},
   Person.prototype.__proto__ === Object.prototype
Person.constructor === Function
   對比3一看，Function和構造函數是Function的Person，他們prototype.__proto__的指向是一樣的。

進入正題

有這幾個基本東西，我們就可以來推導了。

先看下面的代碼，
js 我們來推到 aaa.__proto__.__proto__.__proto__

function aaa(){} 
var _aaa = new aaa()

1. aaa.__proto__
   aaa構造函數是Function
   aaa.constructor === Function
aaa.__proto__ === Function.prototype

2. aaa.__proto__.__proto__
aaa.__proto__.__proto__ === Function.prototype.__proto__
   依據 Function.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype

3. aaa.__proto__.__proto__.__proto__
aaa.__proto__.__proto__.__proto__ === Object.prototype.__proto__
   依據 Object.prototype.__proto__ === null
aaa.__proto__.__proto__.__proto__ === null

還是上面代碼，我們接着推導_aaa.__proto__.__proto__.__proto__

1. _aaa.__proto__
   _aaa的構造函數是 aaa
   _aaa.constructor === aaa
_aaa.__proto__ === _aaa.constructor.prototype
_aaa.__proto__ === aaa.prototype

2. _aaa.__proto__.__proto__
_aaa.__proto__.__proto__ === aaa.prototype.__proto__
   參考圖，Foo.prototype.__proto__ === Object.prototype
_aaa.__proto__.__proto__ === aaa.prototype.__proto__ === Object.protype

3. _aaa.__proto__.__proto__.__proto__
_aaa.__proto__.__proto__.__proto__ === Object.protype.__proto__
   依據 Object.prototype.__proto__ === null
_aaa.__proto__.__proto__ === null

正文延伸, 加上繼承關係

我們再來看看，帶繼承關係的

function aaa(){}
function bbb(){}
bbb.prototype = new aaa()
var _bbb = new bbb();

bbb.__proto__.__proto__.__proto__ === null
這個沒啥好說，
關鍵來看看 bbb.prototype.__proto__.__proto__.__proto__

1. bbb.prototype.__proto__
bbb.prototype.__proto__ === bbb.prototype.constructor.prototype
   bbb.prototype的原型是 aaa的實例， bbb原型的構造函數就是aaa,所以
   bbb.prototype.__proto__ === aaa.prototype

2. bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ === aaa.prototype.__proto__
   參考圖，Foo.prototype.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__ === Object.prototype

3. bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ .__proto__=== Object.prototype.__proto__ === null

再來看看_bbb.__proto__.__proto__.__proto__ .__proto__

1. _bbb.__proto__
_bbb.__proto__ === bbb.prototype
2. _bbb.proto.proto
   _bbb.__proto__.__proto__ === bbb.prototype._proto__ === bbb.prototype.constructor.prototype === aaa.prototype
3. _bbb.proto.proto.proto
   _bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__
   參考圖Foo.prototype.__proto__ === Object.prototype
_bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__ === Object.prototype
4. _bbb.__proto__.__proto__.__proto__.__proto__
_bbb.__proto__.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null

正文 再加量

看看如下代碼

function aaa(){}
var _aaa = new aaa()

function bbb(){}
bbb.prototype = new aaa();

var _bbb = new bbb();

function ccc(){}
ccc.prototype = new bbb()
var _ccc = new ccc()

我們再來分析_ccc的prototype和__proto__,你們會說，你有完沒完
，那我就不分析了，我來推斷：

推斷：

1. 任何自定義的function本身，三次__proto__必然是null,也就是往上找三代
   包括Function,Object, Error等等
   Fucntion.__proto__ 看圖，依據
   Object.__proto__ === Function.prototype === Function.__proto__
   我們來推導Function.__proto__.__proto__ .__proto__
   第一步：Function.__proto__ === Function.prototype
   第二步：Function.__proto__.__proto__ === Function.prototype.__proto__ === Object.protetype
   第三步:Function.__proto__.__proto__ .__proto__ === Object.protetype.__proto__ === null
   都是Function構造出來的
   我們來測試一下ccc
   js ccc.__proto__.__proto__.__proto__ === null // true

2. 繼承關係的function fn，假設繼承次數爲n,
   _fn = new fn();
   那麼 _fn.__protot__[3 + n] === null
   _ccc應該是3+2就是5次
   js _ccc.__proto__.__proto__.__proto__.__proto__.__proto__ === null // true

3. 繼承關係的function fn，假設繼承次數爲n
   推到 fn.prototype.__proto__[3+n-1]
   ccc應該是 4次__proto__
js ccc.prototype.__proto__.__proto__.__proto__.__proto__ === null // true
   當然上面關聯的關係，就自己慢慢看吧

正文之外, class

下面的代碼也是遵守規則，至於爲什麼，問自己嘍。

class aaa {}
class bbb extends aaa{}
class ccc extends bbb{};
var _ccc = new ccc()

關於Number,Boolen, String,Function, Date, Array, RegExp等的__proto__和prototype.proto`

1. __proto__
   因爲這些都是Function創建出來的函數，__proto__在函數上時就是表示構造函數的prototype,所以
   .__proto__ === .constrcutor.prototype === Function.prototype
2. .prototype.__proto__ 這些老骨頭不遵循 __proto__ 爲構造函數的prototype
   在上面提到過了，Function.prototype.__proto__ === Object.prototype，
   類推，這些內置的老骨頭的 .prototype.__proto__ === Object.prototype

總結

總結， 特別需要記憶的:

1. Object.prototype.__proto__ === null
2. Function.prototype.__proto__ === Object.prototype
   內置Number,Boolen, String,Function, Date, Array, RegExp等一樣
3. Object.__proto__ === Function.prototype === Function.__proto__
   聯繫2，這些東西都是Function創建出來的
4. Math, JSON的__ptoto__是 Object.prototype
   typeof 可以看出來這兩個是object，而不是Function
5. function a(){} 這樣創建出來，沒有繼承關係的函數
   a.prototype.__proto__ === Object.prototype
6. 有繼承關係的function看上面的推斷
7. 對象字面量和new Object() 比如， var a ={}, b = new Object(), c = [];
   a.__proto__ === a.constructor.prototype === Object.protype
a.__proto__.__proto__ === Object.protype.__proto__ === null
8. 基本數據類型string,number,boolean,比如 var a = '', b=10, c= false，
   b.__proto__ === b.constructor.prototype === Number.prototype
b.__proto__.__proto__ === Number.prototype.__proto__ === Object.prototype
b.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null
9. null和undefined沒有__proto__

最終

1. 看圖
2. 瀏覽器輸入 xx.__proto__ 或者xx.prototype自己看去