天天看點

前端開發基礎之 圖解JS原型鍊

#頭條創作挑戰賽#

希望可以幫助到前端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__)
複制代碼           

下面來看看各個構造函數與它自己原型對象之間的關系:

前端開發基礎之 圖解JS原型鍊

proto

每個對象都有_proto_,它是隐式原型屬性,指向了建立該對象的構造函數原型。由于js中是沒有類的概念,而為了實作繼承,通過 _proto_ 将對象和原型聯系起來組成原型鍊,就可以讓對象通路到不屬于自己的屬性。

函數和對象之間的關系

前端開發基礎之 圖解JS原型鍊

Foo、Function和Object都是函數,它們的_proto_都指向Function.prototype。

原型對象之間的關系

前端開發基礎之 圖解JS原型鍊

它們的_proto_都指向了Object.prototype。js原型鍊最終指向的是Object原型對象

_proto_原型鍊圖

前端開發基礎之 圖解JS原型鍊

相信隻要你看懂了上面的圖表,那麼你應該就已經了解了js的原型鍊了。

總結

  • Function 和 Object 是兩個函數。
  • proto 将對象和原型連接配接起來組成了原型鍊。
  • 所有的函數的 proto 都指向Function原型對象。
  • js的原型鍊最終指向的是Object原型對象(Object.prototype)(在這裡我将null排除在外了)。
前端開發基礎之 圖解JS原型鍊

————————————————————————

補充

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
複制代碼           

最終的指向不需要解釋了,上面的圖中已經有講到了。其實以上的内容紅皮書中都有,新人在閱讀時,進行一定程度的拆解就好,希望可以幫助大家,遲到的補充 。