原型鏈

原文鏈接:https://blog.csdn.net/honeysliane/article/details/53449526

原型鏈

1.什麼是原型鏈?

原型鏈是實例對象與原型之間的鏈接

2.原型鏈是怎麼形成的?

  • 要點1

請看以下代碼,思考這樣一個問題“bb是否會被打印出來?爲什麼?

        function Person(){
        this.name = "小明";
        }
        Person.prototype.showName = function(){
            alert(this.name);
        }
        var bb = new Person();
        bb.showName();

答案是bb會彈出小明。
Person.prototype也是一個對象,只是這個對象比較特殊,叫“原型對象”。然後我們在原型對象Person.prototype上掛載了showName這個方法。
bb是構造函數Person實例化的一個新對象。然而bb上爲什麼也有showName方法呢?
------因爲實例對象bb與原型對象Person.prototype之間存在一個隱式鏈接。這個隱式鏈接就是 _ proto _ 原型鏈。
bb自身是沒有showName方法的,但這並不能阻止bb的腳步,因爲它有_ proto _ 原型鏈,當bb在自身的方法中找不到showName時,就會通過它與生具有的 _ proto _ 原型鏈繼續查找它的原型對象Person.prototype,通過原型鏈,實例化對象bb也可以擁有原型對象Person.prototype上的方法了。
總結:
每一個構造函數上都有一個prototype屬性,每一個對象,包括被實例出來的對象都有一個_ proto _ 屬性,他們的指向都是一致的。

  • 要點2

    function Aaa(){
                this.num = 20;
                   }
              Aaa.prototype.num = 10;
              var bb = new Aaa();
              alert(bb.num);//20
    

爲什麼彈出的是20而不是10呢?
——這裏有兩個num,Aaa自身有num屬性,bb是其實例化出來的對象,所以bb自身也有num屬性,就沒有必要到原型對象上去找了。
總結:
函數對象自身的屬性相當於css加中的行內樣式style,而其原型對象上的屬性相當於css中加的class樣式。style優先級高於class,自身的屬性優先於原型對象上掛載的屬性。

當函數自身有相應的方法或者屬性時就用自己的,當自身沒有時才通過_ proto _ 原型鏈查找

  • 要點3
    原型鏈的最外層是Object.prototype

      function Aaa(){
              // this.num = 20;
           }
        // Aaa.prototype.num = 10;
         Object.prototype.num = 30;
      var a1= new Aaa();
      alert(a1.num);//30
    

當函數對象自身和其原型上都找不到對應的屬性或方法時就繼續通過原型鏈_proto_往Object上查找。

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