Javascript深入__proto__和prototype的區別和聯繫

有一個一個裝逼的同事，寫了一段代碼 function a(){} a.__proto__.__proto__.__proto__ 然後問我，下麵這個玩意a.__proto__.__proto__.__proto__是啥，然後我一臉懵逼，prototype還知道一點，這個__proto__，還來三個， ...

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

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

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

Object.prototype.__proto__ === null
不要糾結，鐵律
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
```
Function.prototype.__proto__ === Object.prototype
這個就是這樣的設計，
```
Function.prototype.constructor === Object 
// false
```
進入正題

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

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

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

aaa.__proto__
aaa構造函數是Function
aaa.constructor === Function
aaa.__proto__ === Function.prototype
aaa.__proto__.__proto__
aaa.__proto__.__proto__ === Function.prototype.__proto__
依據 Function.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__.__proto__
aaa.__proto__.__proto__.__proto__ === Object.prototype.__proto__
依據 Object.prototype.__proto__ === null
aaa.__proto__.__proto__.__proto__ === null

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

_aaa.__proto__
_aaa的構造函數是 aaa
_aaa.constructor === aaa
_aaa.__proto__ === _aaa.constructor.prototype
_aaa.__proto__ === aaa.prototype
_aaa.__proto__.__proto__
_aaa.__proto__.__proto__ === aaa.prototype.__proto__
參考圖，Foo.prototype.__proto__ === Object.prototype
_aaa.__proto__.__proto__ === aaa.prototype.__proto__ === Object.protype
_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__

bbb.prototype.__proto__
bbb.prototype.__proto__ === bbb.prototype.constructor.prototype
bbb.prototype的原型是 aaa的實例， bbb原型的構造函數就是aaa,所以
bbb.prototype.__proto__ === aaa.prototype
bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ === aaa.prototype.__proto__
參考圖，Foo.prototype.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ .__proto__=== Object.prototype.__proto__ === null

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

_bbb.__proto__
_bbb.__proto__ === bbb.prototype
_bbb.proto.proto
_bbb.__proto__.__proto__ === bbb.prototype._proto__ === bbb.prototype.constructor.prototype === aaa.prototype
_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
_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__,你們會說，你有完沒完
，那我就不分析了，我來推斷：

推斷：

任何自定義的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
```
ccc.__proto__.__proto__.__proto__ === null // true
```
繼承關係的function fn，假設繼承次數為n,
_fn = new fn();
那麼 _fn.__protot__[3 + n] === null
_ccc應該是3+2就是5次
```
_ccc.__proto__.__proto__.__proto__.__proto__.__proto__ === null // true
```
繼承關係的function fn，假設繼承次數為n
推到 fn.prototype.__proto__[3+n-1]
ccc應該是 4次__proto__
```
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`

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

## 總結
總結，特別需要記憶的:

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

最終

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

Javascript深入__proto__和prototype的區別和聯繫

正文之前，__proto__和prototype

進入正題

正文延伸, 加上繼承關係

正文 再加量

正文之外, class

最終

Javascript深入proto和prototype的區別和聯繫

正文之前，proto和prototype

正文再加量