1. 程式人生 > 其它 >javascript的原型鏈那些事

javascript的原型鏈那些事

如果你對javascript的原型鏈還有任何疑問,請看這篇文章

進入主題

前言

  1. 原型鏈的規則不百分百適用於所有情況
  2. 顯式原型:prototype,是一個物件{}
  3. 隱式原型:__proto__,是一個物件的屬性

原型鏈規則

  1. 任何一個引用型別的物件都有一個__proto__屬性指向它的建構函式的prototype(也就是建構函式的原型物件,注意原型物件是一個{}型別)
  2. 只有函式型別的物件才有prototype屬性,該屬性的屬性值指向該函式的原型物件。
  3. 當物件上不存在要尋找的屬性或方法時,js會順著隱式原型找當前物件的建構函式的顯示原型物件上是否存在需要的屬性或方法,如果仍然沒有,會一直想上找,直到碰到null結束。

關鍵說明

const dad = function(){}
const instance = new dad()

根據規則,很容易得出下面兩條結論:

  • dad為函式型別,所以dad上存在prototype屬性,屬性值為一個物件,我們稱它為dad的原型物件
  • instance為dad的一個例項,是物件型別,因此instance上面會有一個__proto__屬性,屬性值為dad.prototype

接下來思考,dad.prototype也是一個物件型別,物件型別是由Object()建構函式構造出來的,dad是引用型別,所以也有一個隱式原型屬性,那麼我們應該也能得出下面的結論:

  • dad.prototype.__proto__ === Object.prototype
  • dad.__proto__ === Function.prototype

Okay,按照規則接著向上走,那麼會得到以下結論:

  • Object.prototype.__proto__ === Object.prototype
  • Function.prototype為物件型別

但是,上面的結論不正確了,因為Object函式與Function函式比較特殊,不遵守我們總結的規則。那麼他們應該等於什麼呢?

  • Object.prototype.__proto__ === null
  • Function.prototype為[native code]的底層函式,用於javascript構建初始函式
  • Function.prototype.__proto__ === Object.prototype
  • Function.__proto__ === Funtion.prototype

可以看出,js讓Object建構函式的原型物件的隱式原型最終指向null,否則會造成迴圈引用死迴圈。這樣順著原型鏈找最後一定會走到終點null;對於Function,它的建構函式是它本身,所以Function的原型物件和隱式原型相等。除此之外js讓Function的原型物件的隱式原型也指向Object建構函式的原型物件,這樣終點也會走到null。

結尾

到此,整個原型鏈全部走通,下面放出一張簡單的圖解,幫助理解生硬的文字。如果還有什麼問題,可以發表評論,互相交流。