原型以及原型鏈

js中的原型和原型鏈瀏覽器

 

        當咱們使用構造函數時,每次實例化構造函數的時候,也就是用new改變函數中this的指向時,在函數中咱們有一些屬性不可以徹底使用時,這些不使用的屬性也會被建立出來,這樣就會在咱們的計算機中無形的增長計算機的內存,因此有了咱們更加優化的節省計算機內存的方法,也就是原型。函數

每一個函數在建立的時候都會自帶一個原型對象。好比:工具

 

 

var Fn = function () {    
    this.age = 18;    
    this.name = "jack";
}
Fn.prototype.name = "jim";
Object.prototype.name = "miss";
var f = new Fn();
var f1 = new Fn();
alert(f1.name);
alert(f.name);
post

 

這個時候f和f1會繼承構造函數Fn中prototype屬性中的name值;在構造函數中的值也同樣。測試

當咱們在構造函數中也添加優化

 

this.name="tim"; this

這個時候咱們輸出f1.name和f.name咱們獲得會是tim,這個一結果是根據原型中的原型鏈而引起而來。說的通俗一點呢也就是咱們在查找一個值時,那麼這個時候咱們就會從原型鏈的底層開始查找(也就是構造函數的屬性中先),當自身不知足時就會沿着原型鏈往上查找,最終查找不到知足這個條件會獲得一個undefined;    spa

解析:.net

 

1.你們不明白爲何是將this寫做是原型鏈中的底層,這裏解釋一下,在咱們的原型鏈中構造函數實例化的對象若是要調用構造函數中的原型會使用 f1.name這樣去獲得這個值,當咱們調用這個被構造函數實例化對象的時,其實這個對象的原型是構造函數的prototype原型屬性,而構造函數又是咱們原型鏈中最底層的一個小的原型鏈,因此稱爲原型鏈的底層當自身知足這個條件時就會使用這個值,prototype

 

        下面就說一下原型鏈;原型鏈在原型中是很關鍵的,咱們在原型鏈中的不正確操做會直接影響原型值的得到。

 

        上述例子中的f,f1是被Fn構造函數實例化的對象,咱們的對象都有一個原型對象(__proto__),而這個__proto__指向的是建立這個對象的構造函數的原型屬性(prototype)

        注意下面的介紹,纔好看原型鏈的圖

  1. constructor是構造函數prototype(原型屬性中的屬性),他指的是構造函數自己。

  2. __proto__指的是對象的原型對象,可是__proto__是一個非標準屬性。

  3. prototype是構造函數的原型屬性;也就是咱們常說的原型

  4. 咱們在設置prototype時只能給構造函數設置,對象上是不能夠設置的,若是咱們想用對象
    來得到構造函數中的prototype中的值只能經過非標準屬性(__proto__)來得到,可是不建議使用,只建議在測試中使用__proto__屬性

        這是一個很是複雜的原型鏈,其中在原型鏈中最飽受爭議的就是Object建立了Function,仍是Function建立了Object,咱們若是沿着原型鏈展開Function和Object會發現他們是無羣無盡的。

        一張完整的原型鏈圖來方便你們理解。

       原本打算給你們再添一張原型鏈的圖方便你們理解的,但是添加不上去,若是你們有興趣的話能夠去下面這個網址中瀏覽http://blog.csdn.net/wcm369574584/article/details/51018363

 

 

 

 

 

       經過以上的介紹咱們能夠獲得如下結論:

  1. 每一個對象有一個constructor屬性,指的是這個對象的構造函數。

  2. 當對象沒有constructor這個屬性時他經過__proto__來繼承構造函數中的constructor的屬性。

  3. 每一個函數都有prototype(原型屬性);每一個對象有一個__proto__(原型對象)

  4. 函數都繼承於Function函數,對象都繼承於Object對象,

  5. 函數Function也是對象Object,Object也有本身的構造函數Function,因此Function和Object是互相創造的,
    這在原型中是一個沒法解釋的特例、就好像先有雞仍是先有蛋。
     固然咱們查看原型鏈最好的方法就是在頁面中查看,雖然數據比較龐大,稍微懂原型的人仍是能夠看出來的。

     下面給你們介紹一下如何在網頁中查看原型鏈,本身平時喜歡用谷歌瀏覽器,因此給你們介紹一下在谷歌中如何查看原型鏈,首先在本身的編譯器中輸入如上面的例子,打開調試工具

    點擊+而後輸入在原型鏈中的對象,好比f1,Fn獲得的就是各自的原型鏈了

 

相關文章
相關標籤/搜索