#頭條創作挑戰賽#
希望可以幫助到前端js知識不是那麼紮實的同學,盡管文章閱聽人小,不過能幫到人就行!
原型鍊和原型對象是js的核心,js以原型鍊的形式,保證函數或對象中的方法、屬性可以讓向下傳遞,按照面向對象的說法,這就是繼承。而js通過原型鍊才得以實作函數或對象的繼承,那麼下面我們就來聊一聊js中的原型鍊。
以下圖居多,請放心食用。
prototype和constructor
prototype指向函數的原型對象,這是一個顯式原型屬性,隻有函數才擁有該屬性。constructor指向原型對象的構造函數。
// 可以思考一下的列印結果,它們分别指向誰
function Foo() {}
console.log(Foo.prototype)
console.log(Foo.prototype.constructor)
console.log(Foo.__proto__)
console.log(Foo.prototype.__proto__)
複制代碼
下面來看看各個構造函數與它自己原型對象之間的關系:
proto
每個對象都有_proto_,它是隐式原型屬性,指向了建立該對象的構造函數原型。由于js中是沒有類的概念,而為了實作繼承,通過 _proto_ 将對象和原型聯系起來組成原型鍊,就可以讓對象通路到不屬于自己的屬性。
函數和對象之間的關系
Foo、Function和Object都是函數,它們的_proto_都指向Function.prototype。
原型對象之間的關系
它們的_proto_都指向了Object.prototype。js原型鍊最終指向的是Object原型對象
_proto_原型鍊圖
相信隻要你看懂了上面的圖表,那麼你應該就已經了解了js的原型鍊了。
總結
- Function 和 Object 是兩個函數。
- proto 将對象和原型連接配接起來組成了原型鍊。
- 所有的函數的 proto 都指向Function原型對象。
- js的原型鍊最終指向的是Object原型對象(Object.prototype)(在這裡我将null排除在外了)。
————————————————————————
補充
2022.02.23号補充:
由于是2019年的文章,當時的自己隻是為了理清楚,原型鍊的整個鍊條,它是如何實作繼承或方法複用的,并沒有考慮它執行個體的樣子,真的非常抱歉缺失一環 ,目前由于思維導圖工具已找不到 ,隻能通過代碼補充下了。
let f = new Foo();
f.constructor === Foo;
f._proto_ === Foo.prototype
複制代碼
執行個體化對象f 構造函數指向 Foo, 由于 執行個體化對象f 是不存在顯示原型(f.prototype),執行個體化對象f 通過 隐式原型_proto_ 保證原型鍊條的連續和銜接。那麼這裡又可以看到一個有趣的情況,這是非常優雅且工整的
f._proto_ === Foo.prototype
Foo._proto_ === Function.prototype
複制代碼
最終的指向不需要解釋了,上面的圖中已經有講到了。其實以上的内容紅皮書中都有,新人在閱讀時,進行一定程度的拆解就好,希望可以幫助大家,遲到的補充 。