<thead id="rrjt3"></thead>
      <progress id="rrjt3"><dfn id="rrjt3"></dfn></progress>

      <em id="rrjt3"></em>

        <address id="rrjt3"><ins id="rrjt3"><dfn id="rrjt3"></dfn></ins></address>
          <i id="rrjt3"></i>

        到底什么是JS原型

        時間:2021-05-13 14:56:26 類型:JS/JQUERY
        字號:    

          關于JS原型的解釋,查看網上的資料, 大多數都看的云里霧里, 其主要原因就是, 在解釋前很多都忽略了普通用戶對一些專業名詞、概念本身就不懂的情況,本身就暈, 里面的解釋, 也是暈的, 看似都是漢字, 數數都認識, 但看結果, 還是暈糊糊,導致大家走了很多很多彎路

          一、首先在我們對JS原型進行解釋的時候,我們首先要理解涉到的兩個概念:構造函數、原型對象


        1. 構造函數:在script標簽里面聲明的那個函數(注意: 區分與JAVA,PHP,Python等后臺語言不要混為一談)

          如下


        2. <script>
                      function person(name,age){
                          this.name = name;
                          this.age  = age;
                          //在這里, 整個函數就是構造函數
                      }
              </script>

          2.  原型對象:在聲明上面這個函數后,瀏覽器會自動按照一定的規則在內存中創建一個對象,這個對象就叫做原型對象

         

          3.在聲明了一個函數后,這個構造函數(即聲明了的函數)中會有一個屬性prototype,這個屬性指向的就是這個構造函數對應的原型對象;原型對象中有一個屬性constructor,這個屬性指向的是這個構造函數下面一張圖可以很簡單理解:看圖會意

                protopyte.jpg

          二、使用構造函數創建對象

          此時,p1就是那個構造函數person創建出來的對象,這個對象中是沒有prototype屬性的,prototype屬性只有在構造函數person中有,請看圖!

         var p1 = new person("莊子",18);
             console.dir(p1);
             console.log("----------------------------------------");
             console.dir(person)

        .jpg

         可以看出,構造函數person中有prototype屬性,指向的是person對應的原型對象;

                                    而p1是構造函數person創建出來的對象,它不存在prototype屬性,但p1有一個__proto__屬性,stu調用這個屬性可以直接訪問到構造函數person的原型對象(也就是說,p1的__proto__屬性指向的是構造函數的原型對象),請看圖

        3.jpg

          從上面的代碼中可以看到,創建p1對象雖然使用的是person構造函數,但是對象創建出來之后,這個p1對象其實已經與person構造函數沒有任何關系了,p1對象的__proto__屬性指向的是person構造函數的原型對象。

          如果使用new person()創建多個對象p1、p2、p3,則多個對象都會同時指向person構造函數的原型對象。

          我們可以手動給這個原型對象添加屬性和方法,那么p1,p2,p3…這些對象就會共享這些在原型中添加的屬性和方法。

          如果我們訪問p1中的一個屬性name,如果在p1對象中找到,則直接返回。如果p1對象中沒有找到,則直接去p1對象的__proto__屬性指向的原型對象中查找,如果查找到則返回。(如果原型中也沒有找到,則繼續向上找原型的原型—原型鏈)。

          如果通過p1對象添加了一個屬性name,則p1對象來說就屏蔽了原型中的屬性name。 換句話說:在p1中就沒有辦法訪問到原型的屬性name了。

          通過p1對象只能讀取原型中的屬性name的值,而不能修改原型中的屬性name的值。 p1.name = “小強”; 并不是修改了原型中的值,而是在p1對象中給添加了一個屬性name。

        通過下面的程序來理解上面說的內容:

         function person(name,age){
                        this.name = name;
                        this.age  = age;
                        //在這里, 整個函數就是構造函數
                    }
                     // 可以使用students.prototype 直接訪問到原型對象
                //給students函數的原型對象中添加一個屬性 name并且值是 "張三"
                person.prototype.hobby = "籃球";
                person.prototype.email = "abc@163.com";
         
                var p1 = new person("王小二",18);
                /*
                    訪問p1對象的屬性hobby,雖然在p1對象中我們并沒有明確的添加屬性name,但是
                    p1的__proto__屬性指向的原型中有hobby屬性,所以這個地方可以訪問到屬性hobby的值
                    注意:這個時候不能通過p1對象刪除hobby屬性,因為只能刪除在p1中刪除的對象。
                */
                console.log(p1.hobby);  // 籃球
         
                var p2 = new person('王小二',19);
                console.log(p2.hobby);  // 籃球  都是從原型中找到的,所以一樣。
         
                console.log(p1.hobby === p2.hobby);  // true


        黄网站免费 <