圖解javascript原型鏈

作者: HerryLo

本文永久有效連結: https://github.com/AttemptWeb......

原型鏈和原型物件是js的核心，js以原型鏈的形式，保證函式或物件中的方法、屬性可以讓向下傳遞，按照面向物件的說法，這就是繼承。而js通過原型鏈才得以實現函式或物件的繼承，那麼下面我們就來聊一聊js中的原型鏈。以下圖居多，請放心食用。

prototype和contructor

prototype指向函式的原型物件，這是一個顯式原型屬性，只有函式才擁有該屬性。contructor指向原型物件的建構函式。

// 可以思考一下的列印結果，它們分別指向誰
function Foo() {}

console.log(Foo.prototype)
console.log(Foo.prototype.contructor)
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排除在外了）。

ps: 微信公眾號：Yopai，有興趣的可以關注，每週不定期更新，分享可以增加世界的快樂

相關推薦