十分鐘看懂JS原型和原型鏈

原型鏈圖表

基礎的原型鏈圖就是這樣，是否是看起來很繞呢，下面來進行一一講解

原型（prototype）

• JS全部的函數都有prototype屬性，只有函數纔有
• 其屬性和方法都能被構造函數實例化的對象所共同訪問

從這個例子中能夠看到 Person 這個原型鏈上的方法（sayHello）能夠被實例化出來的對象p1所調用。而當咱們刪除了 Person 原型鏈上的方法時，在p1上就調用不到 sayHello 這個方法了

構造器（constructor）

• constructor存在於每一個函數的prototype屬性中，其指向了函數自己

原型鏈 (_proto_）

• JS中的對象會有個_proto_屬性，指向了建立他的構造函數的prototype,而函數比較特殊也有這個屬性

能夠看出由Person這個函數實例化出的對象p1的_proto_ 是指向構造函數 Person 的 prototype

• 當JS搜索引擎查找對象中的屬性或者方法時，若是在該對象上沒有該屬性和方法的話，會經過原型鏈一層一層往上查找

從這裏咱們能夠看出p1上是沒有 sayHello 這個方法的 可是經過原型鏈往上查找就能夠找到這個方法

實現一個簡單的原型鏈

最後

說個題外話，我在一線互聯網企業工做十餘年裏，指導過很多同行後輩。幫助不少人獲得了學習和成長。

我意識到有不少經驗和知識值得分享給你們，也能夠經過咱們的能力和經驗解答你們在IT學習中的不少困惑，因此在工做繁忙的狀況下仍是堅持各類整理和分享。

我能夠將最近整理的前端面試題免費分享出來，其中包含HTML、CSS、JavaScript、服務端與網絡、Vue、瀏覽器、數據結構與算法等等，還在持續整理更新中，但願你們都能找到心儀的工做。

有須要的朋友點擊這裏免費領取題目+解析PDF。

篇幅有限，僅展現部分截圖：

點擊這裏免費領取題目+解析PDF。