下面內(nèi)容一定要結(jié)合上面這張圖閱讀

開局肯定要用這張經(jīng)典的 JavaScript 原型鏈圖， 結(jié)合這張圖先理解幾個概念:

1. 構(gòu)造函數(shù)， 簡單說構(gòu)造函數(shù)就是用來創(chuàng)建對象和函數(shù)的，頂級的構(gòu)造函數(shù)是 Js 出場時自帶的 Object() 和 Function()
   
   
   

2. 原型對象，簡單說就是每個構(gòu)造函數(shù)都有一個專屬的原型對象， 用于存放這個構(gòu)造函數(shù)的共有屬性和方法， Js引擎調(diào)用Function()創(chuàng)建構(gòu)造函數(shù)時會同時調(diào)用 Object()為這個構(gòu)造函數(shù)創(chuàng)建一個原型對象
   

3. prototype， 構(gòu)造函數(shù)用prototype屬性指向自己的原型對象
   

4. constructor， 原型對象用constructor來指向自己所依附的構(gòu)造函數(shù)
   
   

5. __proto__， 也寫作[[prototype]]，這個屬性用來指向創(chuàng)建對象自己的那個構(gòu)造函數(shù)的原型對象， 指向的是構(gòu)造函數(shù)的原型對象， 而不是構(gòu)造函數(shù)本身
   
   
   (至于__proto__屬性的意義， 其他很多文章都有說，這里不再贅述)

關(guān)鍵點:

• Function， 所有的構(gòu)造函數(shù)都由Function創(chuàng)建， 包括 Function 它自己
• Object， 所有的原型對象都由Object創(chuàng)建
• 每一個構(gòu)造函數(shù)都有一個專屬的原型對象,它們使用prototype和constructor 互指對方

理解了上面 5 點， 可以想象一下當(dāng) Js 引擎執(zhí)行 function Foo() {...} 的過程可能如下:

1. 調(diào)用 Function() 創(chuàng)建構(gòu)造函數(shù) Foo
2. 調(diào)用 Object() 創(chuàng)建一個名為 Foo_prototype 的空對象， 做為 Foo 的原型對象
3. 執(zhí)行: Foo.prototype = Foo_prototype
4. 執(zhí)行: Foo_prototype.constructor = Foo
5. 執(zhí)行: Foo.__proto__ = Function_prototype //也就是Function.prototype

下面檢驗一下， 代碼參考自"妖精的尾巴"大佬的文章: https://juejin.cn/post/6844903989088092174

function Foo() {}   //自定義構(gòu)造函數(shù) Foo， 這個構(gòu)造函數(shù)本身就是由 Function() 這個頂級構(gòu)造函數(shù)執(zhí)行創(chuàng)建
let f1 = new Foo(); //f1為實例對象， 由 Foo()這個二級構(gòu)造函數(shù)創(chuàng)建
f1.prototype === ?; //f1為實例對象，不是構(gòu)造函數(shù)， 它沒有原型對象 所以它也沒有 prototype 屬性
f1.__proto__ === ? 

那么這個 f1的proto指向誰， 看上面概念點 5， __proto__屬性指向的是創(chuàng)建這個對象的構(gòu)造函數(shù) 的 原型對象， 那么 f1 這個實例對象是由 Foo()構(gòu)造函數(shù)創(chuàng)建的， 所以f1.__proto__指向的是 Foo()的原型對象， 寫作 Foo.prototype，所以:

f1.__proto__ === Foo.prototype;

接下來

Foo.prototype.__proto__ === ?

Foo 表示 Foo 這個構(gòu)造函數(shù)， Foo.prototype 表示 Foo這個構(gòu)造函數(shù)的原型對象， Foo.prototype.__proto__指向創(chuàng)建這個原型對象的那個構(gòu)造函數(shù)所對應(yīng)的原型對象， 感覺有點繞， 但是原型對象也是創(chuàng)建出來的啊， 概念 2 說了， 所有的原型對象都是由 Object()這個構(gòu)造函數(shù)創(chuàng)建的， 而 Object 的原型對象寫作 Object.prototype， 所以:

Foo.prototype.__proto__ === Object.prototype;

再來

Foo.__proto__ === ?
Function.__proto__ === ?

Foo，F(xiàn)unction 是什么， 都是構(gòu)造函數(shù)， 而且 Foo 這個構(gòu)造函數(shù)就是由 Function創(chuàng)建得來的， 概念 1 說了所有的構(gòu)造函數(shù)都由 Function 創(chuàng)建，包括它自己， 再次重復(fù)一下，__proto__屬性指向的是創(chuàng)建這個對象的那個構(gòu)造函數(shù)的原型對象， Function的原型對象是 Function.prototype， 所以:

Foo.__proto__ === Function.prototype;
Function.__proto__ === Function.prototype;

再來

Function.prototype.__proto__ === ?

Function.prototype 是什么， 是Function 這個構(gòu)造函數(shù)的原型對象， 原型對象由什么創(chuàng)建， 是由 Object()這個構(gòu)造函數(shù)創(chuàng)建， Object的原型對象寫作什么， 寫作 Object.prototype， 所以:

Function.prototype.__proto__ === Object.prototype;

下面看看 Object這邊

let a1 = Object();
a1.__proto__ === ?

a1這個實例對象由 Object 創(chuàng)建， Object的原型對象寫作 Object.prototype， 所以:

a1.__proto__ === Object.prototype;

1722414050160.png

至于 Object.prototype.__proto__ === null， 就不贅述了， 原型對象往上找到Object.prototype這里就到頂了， 沒法再往上找了.