開局肯定要用這張經(jīng)典的 JavaScript 原型鏈圖汉嗽， 結(jié)合這張圖先理解幾個(gè)概念:
構(gòu)造函數(shù)惕医， 簡單說構(gòu)造函數(shù)就是用來創(chuàng)建對(duì)象和函數(shù)的返顺，頂級(jí)的構(gòu)造函數(shù)是 Js 出場時(shí)自帶的 Object() 和 Function()
原型對(duì)象，簡單說就是每個(gè)構(gòu)造函數(shù)都有一個(gè)專屬的原型對(duì)象怨愤， 用于存放這個(gè)構(gòu)造函數(shù)的共有屬性和方法派敷， Js引擎調(diào)用Function()創(chuàng)建構(gòu)造函數(shù)時(shí)會(huì)同時(shí)調(diào)用 Object()為這個(gè)構(gòu)造函數(shù)創(chuàng)建一個(gè)原型對(duì)象
prototype， 構(gòu)造函數(shù)用prototype屬性指向自己的原型對(duì)象
constructor篮愉， 原型對(duì)象用constructor來指向自己所依附的構(gòu)造函數(shù)
__proto__， 也寫作[[prototype]]柿汛，這個(gè)屬性用來指向創(chuàng)建對(duì)象自己的那個(gè)構(gòu)造函數(shù)的原型對(duì)象冗酿， 指向的是構(gòu)造函數(shù)的原型對(duì)象， 而不是構(gòu)造函數(shù)本身
(至于__proto__屬性的意義弱判， 其他很多文章都有說，這里不再贅述)
關(guān)鍵點(diǎn):
- Function锥惋， 所有的構(gòu)造函數(shù)都由Function創(chuàng)建昌腰， 包括 Function 它自己
- Object， 所有的原型對(duì)象都由Object創(chuàng)建
- 每一個(gè)構(gòu)造函數(shù)都有一個(gè)專屬的原型對(duì)象,它們使用prototype和constructor 互指對(duì)方
理解了上面 5 點(diǎn)膀跌， 可以想象一下當(dāng) Js 引擎執(zhí)行 function Foo() {...} 的過程可能如下:
- 調(diào)用 Function() 創(chuàng)建構(gòu)造函數(shù) Foo
- 調(diào)用 Object() 創(chuàng)建一個(gè)名為 Foo_prototype 的空對(duì)象遭商， 做為 Foo 的原型對(duì)象
- 執(zhí)行: Foo.prototype = Foo_prototype
- 執(zhí)行: Foo_prototype.constructor = Foo
- 執(zhí)行: Foo.__proto__ = Function_prototype //也就是Function.prototype
下面檢驗(yàn)一下， 代碼參考自"妖精的尾巴"大佬的文章: https://juejin.cn/post/6844903989088092174
function Foo() {} //自定義構(gòu)造函數(shù) Foo捅伤， 這個(gè)構(gòu)造函數(shù)本身就是由 Function() 這個(gè)頂級(jí)構(gòu)造函數(shù)執(zhí)行創(chuàng)建
let f1 = new Foo(); //f1為實(shí)例對(duì)象劫流， 由 Foo()這個(gè)二級(jí)構(gòu)造函數(shù)創(chuàng)建
f1.prototype === ?; //f1為實(shí)例對(duì)象，不是構(gòu)造函數(shù)丛忆， 它沒有原型對(duì)象 所以它也沒有 prototype 屬性
f1.__proto__ === ?
那么這個(gè) f1的proto指向誰祠汇， 看上面概念點(diǎn) 5， __proto__屬性指向的是創(chuàng)建這個(gè)對(duì)象的構(gòu)造函數(shù) 的 原型對(duì)象熄诡， 那么 f1 這個(gè)實(shí)例對(duì)象是由 Foo()構(gòu)造函數(shù)創(chuàng)建的可很， 所以f1.__proto__指向的是 Foo()的原型對(duì)象， 寫作 Foo.prototype凰浮，所以:
f1.__proto__ === Foo.prototype;
接下來
Foo.prototype.__proto__ === ?
Foo 表示 Foo 這個(gè)構(gòu)造函數(shù)根穷， Foo.prototype 表示 Foo這個(gè)構(gòu)造函數(shù)的原型對(duì)象姜骡， Foo.prototype.__proto__指向創(chuàng)建這個(gè)原型對(duì)象的那個(gè)構(gòu)造函數(shù)所對(duì)應(yīng)的原型對(duì)象导坟， 感覺有點(diǎn)繞屿良， 但是原型對(duì)象也是創(chuàng)建出來的啊， 概念 2 說了惫周， 所有的原型對(duì)象都是由 Object()這個(gè)構(gòu)造函數(shù)創(chuàng)建的尘惧， 而 Object 的原型對(duì)象寫作 Object.prototype， 所以:
Foo.prototype.__proto__ === Object.prototype;
再來
Foo.__proto__ === ?
Function.__proto__ === ?
Foo递递，F(xiàn)unction 是什么喷橙， 都是構(gòu)造函數(shù)， 而且 Foo 這個(gè)構(gòu)造函數(shù)就是由 Function創(chuàng)建得來的登舞， 概念 1 說了所有的構(gòu)造函數(shù)都由 Function 創(chuàng)建贰逾，包括它自己， 再次重復(fù)一下菠秒，__proto__屬性指向的是創(chuàng)建這個(gè)對(duì)象的那個(gè)構(gòu)造函數(shù)的原型對(duì)象疙剑， Function的原型對(duì)象是 Function.prototype， 所以:
Foo.__proto__ === Function.prototype;
Function.__proto__ === Function.prototype;
再來
Function.prototype.__proto__ === ?
Function.prototype 是什么践叠， 是Function 這個(gè)構(gòu)造函數(shù)的原型對(duì)象言缤， 原型對(duì)象由什么創(chuàng)建， 是由 Object()這個(gè)構(gòu)造函數(shù)創(chuàng)建禁灼， Object的原型對(duì)象寫作什么管挟， 寫作 Object.prototype， 所以:
Function.prototype.__proto__ === Object.prototype;
下面看看 Object這邊
let a1 = Object();
a1.__proto__ === ?
a1這個(gè)實(shí)例對(duì)象由 Object 創(chuàng)建弄捕， Object的原型對(duì)象寫作 Object.prototype僻孝， 所以:
a1.__proto__ === Object.prototype;
至于 Object.prototype.__proto__ === null， 就不贅述了守谓， 原型對(duì)象往上找到Object.prototype這里就到頂了穿铆， 沒法再往上找了.
