圖解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，有興趣的能夠關注，每週不按期更新，分享能夠增長世界的快樂