這一章讓你理解透js中的prototype和__proto__

說在開始之前的話:一定注意每個單詞的大小寫!

  • Function Array Object 這是瀏覽器內置的三個構造函數。 不管是函數還是數組,這些都屬於對象類型

  • 其中Function這個函數沒有被什麼構造出來,是js引擎使用底層代碼實現的,後面兩者都是基於Function被Function構造出來的。

  • 記住,js中,每一個對象都是被構造函數構造出來的。就算你是直接這麼寫:

    • var obj = {};這樣是通過new Object這個構造函數構造出來的)
    • var arr = [];這樣是通過new Array這個構造函數構造出來的)
    • var func = function(){} 或者 直接函數聲明 function test(){}這樣都是在內部通過new Function構造出來的)
  • 上面這些創建普通對象,數組對象,函數對象都是一種語法糖,也就是簡寫,實質上都是通過new 相對應的構造函數創造出來的

  • 然後這些通過構造出來的對象,他們都會有一個__proto__屬性,這個屬性的屬性值指向的是將這個對象構造出來的那個構造函數身上的一個屬性prototype的地址,注意這個屬性只有函數纔有.

function  Test(){
    this.xxx = xxx;
    ......;
}
var test = new Test();
  • Test函數本身有一個prototype 這個屬性的值是一個普通的對象 Test.prototype

  • test是構造出來的實例對象,身上有一個__proto__屬性,這個屬性的值爲 test.__proto__ = Test.prototype,只要創建了一個實例對象,就會有這麼一個屬性,指向構造函數的原型prototype

  • 然後下一個知識點,Test身上爲什麼也有__proto__呢,因爲前面說了,這個函數也是對象類型,對象就一定是由構造函數構造出來的,Test這個構造函數自然也就有__proto__。前面也有說過,函數都是由這個Function構造出來的。

  • 這個屬性__proto__指向的就是Function這個構造函數的原型prtotype

  • 那麼也就是說函數這個對象類型不但具有prototype屬性,還有__proto__屬性。也只有函數才同時擁有這兩個屬性

  • 那麼之前的內置的Object,Array這兩個構造函數也是滿足上面這個條件的,有兩個屬性,__proto__屬性也都是指向的Function的原型prototype。


最後附上一張圖,助你理解原型鏈

這裏構造函數本身的__proto__這條鏈就沒畫圖了,前面也用文字詳細的說過。
至此,原型和隱式原型也就講完了,不知道大家看完之後有沒有一種恍然大悟的感覺呢?歡迎大家在下方留言評論哦,如有不足之處還請各位大佬加以指正!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章