JS原型+原型鏈+設計模式


JavaScript是一種基於對象的語言,JavaScript中的所有對象,都具有prototype屬性。prototype屬性返回對象的所有屬性和方法,所有 JavaScript 內部對象都有只讀的 prototype 屬性,可以向其原型中動態添加屬性和方法,但該對象不能被賦予不同的原型。但是自定義的對象可以被賦給新的原型。

對象分為函數對象和普通對象,區分:凡是通過 new Function() 創建的對象都是函數對象,其他的都是普通對象。(Object ,Function 是JS自帶的函數對象)

1.原型對象:prototype

 在JS 中,函數對象其中一個屬性:原型對象 prototype。普通對象是沒有prototype屬性,但有__proto__屬性。

原型的作用就是給這個類的每一個對象都添加一個統一的方法,在原型中定義的方法和屬性都是被所以實例對象所共享。

   例:

      var person = function(name){
         this.name = name
      };
      person.prototype.getName = function(){//通過person.prototype設置函數對象屬性
           return this.name; 
      }
      var zxj= new person(‘zhangxiaojie’);
      zxj.getName(); //zhangxiaojie       //zxj繼承上屬性

2.原型鏈

 __proto__:js創建對象的內置屬性,用於指向創建它的函數對象的原型對象prototype。(是JS內部使用尋找原型鏈的屬性。當實例化一個對象時候,內部會新建一個__proto__屬性並把prototype賦值給它)

    下圖為原型鏈運行圖解,當我們實例一個對象之后,調用它的內部方法,他的運行順序是先找自身有沒有該方法,如果沒有就會通過__proto__屬性想上層尋找,一直尋找到Object對象中,如果還沒有才會報錯null

        p._proto_----->Persion._proto_---->object._proto_----->null

 

3.設計模式

(1)工廠模式:在函數內創建一個對象,給對象賦予屬性及方法再將對象返回。

      function Parent(){  
             var  Child = new Object();  
             Child.name="ZXJ";  
             Child.age="24";

      Child.sex=function(){  

             return "女";  
         };   
           return Child;  
      };  
      調用:
      var  x =Parent();  

      alert(x.name);      //ZXJ
      alert(x.sex());       //女

(2)構造函數模式:無需再函數內部重建創建對象,而使用this指代

     function Parent(){  

              var  Child = new Object();  
              this.name="ZXJ";  
              this.age=24";  
              this.lev=lev;  

      Child.sex=function(){  

             return "女";  
          };   
             return Child;  
        };  
        調用:
        var  x = new Parent();  
        alert(x.name);      //ZXJ
        alert(x.sex());       //女

  (3)原型模式:函數中不對屬性進行定義,利用prototype屬性對屬性進行定義,可以讓所有對象實例共享它所包含的屬性及方法。

    function Parent(){   };  
          Parent.prototype.name="ZXJ";  
          Parent.prototype.age="24";  
          Parent.prototype.sex=function(){

        var s="女";

        alert(s);

      };  
    

     調用:
        var  x =new  Parent();  
        alert(x.name);      //ZXJ
           alert(x.sex());       //女

 

  (4)混合模式:原型模式+構造函數模式。這種模式中,構造函數模式用於定義實例屬性,而原型模式用於定義方法和共享屬性。

     function Parent(){  
          this.name="ZXJ";  
          this.age=24;  
      };
      Parent.prototype.sayname=function(){  
         return this.name;  
      };
      調用:
      var  x =new  Parent(); 
      alert(x.sayname());   //ZXJ  

 

  (5)動態原型模式:將所有信息封裝在了構造函數中,而通過構造函數中初始化原型,這個可以通過判斷該方法是否有效而選擇是否需要初始化原型。

 

    function Parent(){  
        this.name="ZXJ";  
        this.age=24;  
       if(typeof Parent._sayname=="undefined"){     
           Parent.prototype.sayname=function(){  
                   return this.name;  
           }  
            Parent._sayname=true;  
        }  
         
      };   
     調用: 
    var  x =new  Parent();  
    alert(x.sayname());  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM