JavaScript原型鏈的原理是什么

這篇文章主要講解了“JavaScript原型鏈的原理是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript原型鏈的原理是什么”吧！

解析原型鏈

原型鏈?zhǔn)荍avaScript這門語言設(shè)計的十分有意思的地方之一。在解析原型鏈之前，我們需要了解以下幾個重要的概念。

構(gòu)造函數(shù)

構(gòu)造函數(shù)是一種比較特殊的函數(shù)，它通常被人為地約定為函數(shù)名的首字母需要大寫，且必須通過new操作符來進(jìn)行調(diào)用(與普通函數(shù)的本質(zhì)上的區(qū)別)，它的作用是用來創(chuàng)建特定類型的對象。在JavaScript中也一些原生的構(gòu)造函數(shù)，如Object、Array、Function等等。

實例

每當(dāng)構(gòu)造函數(shù)被new運算符調(diào)用時，都會創(chuàng)建出一個新對象，這個過程被稱為實例化。而這個對象就被稱為實例。也就是說任何對象都是一個實例，但關(guān)鍵在于創(chuàng)建這個實例的構(gòu)造函數(shù)是誰?以及它的原型是誰?

原型

構(gòu)造函數(shù)內(nèi)部有個特殊的屬性prototype，這個屬性指向了一個對象，沒錯它就是原型也稱為原型對象。原型對象是一個十分特殊存在，每當(dāng)構(gòu)造函數(shù)實例化一個對象時，這個實例的[[Prototype]]會默認(rèn)指向構(gòu)造函數(shù)的prototype。實例對象可以通過自身的[[Porototyoe]]屬性找到原型對象，而原型對象可以通過自身的construcor屬性找到是哪個構(gòu)造函數(shù)創(chuàng)建了這個實例。(注意許多瀏覽器會把屬性[[Prototype]]替代為屬性__proto__。)

構(gòu)造函數(shù)、實例和原型值之間的關(guān)系

為了進(jìn)一步弄清楚構(gòu)造函數(shù)、實例和原型之間的關(guān)系，我們可以從下面這張圖片開始

• 實例dog通過自身的[[Prototype]]屬性找到了原型Dog.prototype

• 構(gòu)造函數(shù)Dog通過自身的prototype屬性找到了原型Dog.prototype

• 原型Dog.prototype則通過自身的constructor屬性找到了構(gòu)造函數(shù)Dog

• 實例dog通過constructor屬性找到了構(gòu)造函數(shù)Dog。

為實例dog通過constructor屬性找到了構(gòu)造函數(shù)Dog這個過程不用實線箭頭呢?這里到底有什么細(xì)節(jié)呢?，讓我們再來看一段簡單的代碼和一張圖片

function Dog(name){     this.name = name;      } let dog = new Dog("cheems");

從代碼結(jié)合圖片來看，我們不難發(fā)現(xiàn)實例dog上并沒有constructor這個屬性，而原型對象才擁有這個屬性，那么實例是如何獲取到這個屬性呢?  ，這就涉及到了JavaScript中一種特殊的行為——委托，下面我們就來了解一下什么是委托。

委托

當(dāng)我們嘗試去獲取對象的某個屬性值，但該對象并沒有這個屬性時，那么JavaScript  會試著從原型對象中獲取屬性值。如果那個原型對象也沒有該屬性，那么再從它的原型中尋找，依次類推直到該過程最后到達(dá)終點Object.prototype，如果仍然沒有找到就返回undefined。這個過程被稱為委托。

現(xiàn)在你就明白了，實例dog正是通過委托這種方式找到了創(chuàng)建自己的構(gòu)造函數(shù)。在明白這一點之后，原型鏈也就呼之欲出了。

原型鏈

如果在第一個對象上沒有找到需要的屬性或者方法引用，引擎就會繼續(xù)在它的[[Prototype]]指向的對象上進(jìn)行查找。同理如果后者中也沒有找到需要的引用就會繼續(xù)查找它的[[Prototype]]，依次類推直到到達(dá)Object.prototype，這一系列對象的鏈接被稱為原型鏈。

我們可以用一張圖來表示下

由于構(gòu)造函數(shù)也是對象，所以它同樣具有構(gòu)造函數(shù)和原型。構(gòu)造函數(shù)的prototype是實例的原型，并非自身的原型。自定義的構(gòu)造函數(shù)同樣需要借助[[Prototype]]找到原型，進(jìn)而找到創(chuàng)建自己的構(gòu)造函數(shù)——即原生構(gòu)造函數(shù)Function，但請注意原生的構(gòu)造函數(shù)Function的[[Prototype]]是指向了Function.prototype。

console.log(Function.__proto__ === Function.prototype); // true

所有的原型對象都可以沿著原型鏈一直尋找至到找到最后的原型對象Object.prototype，然后Object.prototype再往上尋找就是Null，用來表示此處沒有對象。

感謝各位的閱讀，以上就是“JavaScript原型鏈的原理是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript原型鏈的原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！