JS面向對象基礎篇（封裝 繼承 多態）

首先咱們要建立一個對象，咱們能夠利用javascript的語法特徵，以類的思想來建立對象

一:封裝

（1）原始方法，代碼以下

<script>
   var obj=new Object();
   obj.name='Tom'; //給對象添加屬性
   obj.sex=22;
   obj.showName=function(){
    //給對象添加方法
    alert(this.name);
} 
   obj.showAge=function(){
    alert(this.age);
} 
   obj.showName();   //'Tom'
   obj.showAge();   //22

//上面的方式經過new關鍵字生成一個對象，而後根據javascript是動態語言的特性來添加屬性和方法，構造一個對象。其中this表示調用該方法的對象。
這種方式的問題是若是須要屢次建立對象，那麼須要重複代碼屢次，不利於代碼的複用。

</script>

 

（2）工廠加工， 代碼以下

<script>
   function createObj(name,age){
      var Obj=new Object();
      obj.name=name;
      obj.age=age;
      obj.showName=function(){
         alert(this.name);  
}
      obj.showAge=function(){
         alert(this.age);    
}
      return obj;
}

   var obj1=createObj('sun',22);
   var obj2=createObj('leo',21);

   obj1.showName();  //sun
   obj1.showAge();    //22
   obj2.showName();  //leo
   obj2.showAge();    //21


   //上面經過定義幾個函數的對象，解決了不一樣對象持有函數對象的私有屬性問題。如今全部對象的方法都持有上面兩個函數的引用，但這麼一來，對象的函數又和
   對象相互獨立了，這和麪向對象中持有方法屬於與特定類的思想不符。
</script>

 

（3）構造函數方式， 代碼以下

 <script>
      function person(name,age){
      //var this=new Object();  //系統模擬建立對象
      this.name=name;
      this.age=age;
      this.showName=function(){
         alert(this.name);     
}
      this.showAge=function(){
         alert(this.age);     
}
    //return this    //系統模擬返回了對象    
}

   var obj1=new person('sun',22);
   var obj2=new person('leo',21);

   obj1.showName();  //sun
   obj1.showAge();    //22
   obj2.showName();  //leo
   obj2.showAge();    //21

   //構造函數的方式與工廠加工方式同樣，會爲每一個對象建立獨享的函數對象，固然也能夠將這些函數對象定義在構造函數外面，這樣又有了對象和方法
     相互獨立的問題

   </script>

 

（4）原型方法， 代碼以下

 <script> 
       function person(){}  //定義一個空構造函數，且不能傳遞參數
       person.prototype.age=22;
       person.prototype.array=['sun','leo'];
       person.prototype.showAge=function(){
           alert(this.age);
}
       person.prototype.showArray=function(){
           alert(this.array);
}

       var obj1=new person();  //生成一個person對象
       var obj2=new person();
       obj1.array.push('blue');  //向obj1的array屬性添加一個屬性
       obj1.showArray（）; //'sun','leo','blue'
       obj2.showArray（）; //'sun','leo','blue'

    //上面的代碼經過obj1向obj1的屬性array添加元素時，obj2的array屬性的元素也跟着受影響，緣由是在於obj1和obj2對象的array屬性引用的是同一個Array
     對象，那麼改變這個Array對象，另外一個引用Array對象的屬性天然也會受到影響

  </script>

 

（5）混合的構造函數/原型方式， 代碼以下

  <script>
       function person(name,age){
        this.name=name;
        this.age=age;
}      
       person.prototype.showName=function(){
        alert(this.name);
}
       person.prototype.showAge=function(){
        alert(this.age);
}

       var obj1= new person('sun',22);
       var obj2= new person('leo',21);

       obj1.showName();  //sun
       obj1.showAge();    //22
       obj2.showName();  //leo
       obj2.showAge();    //21

    //屬性私有後，改變各自的屬性不會影響別的對象。同時，方法也是由各個對象共享的。在語義上，這符合了面向對象編程的要求。

    </script>

 

二:繼承（主要包括屬性的繼承和方法的繼承）

代碼以下
   <script>        
      function person(name, sex){
        this.name=name;
        this.sex=sex;
}

     person.prototype.showName=function(){
           alert(this.name);
}
     person.prototype.showSex=function(){
          alert(this.sex);
}
   ////////////////////////////////////////////////////

     function worker(name,sex,job){
        person.call(this,name,sex);//構造函數假裝   調用父級的構造函數--爲了繼承屬性
        this.job=job;
}

     //原型鏈  經過原型來繼承父級的方法

     for(attr in person.prototype){
       worker.prototype[attr]=person.prototype[attr];
}
     worker.prototype.showJob=function(){
         alert(this.job);
 }

      var op=new person('blue','男');  
      var ow=new worker('blue','男','程序員');

      op.showName();  //blue
      op.showSex();  //男
      ow.showName();  //blue
      ow.showsex();  //男
      ow.showjob();  //程序員

    //繼承的好處：父類新加的功能，子類也具有該功能，子類新加的功能不會影響父類的功能
   </script>

 

原文地址：http://www.jianshu.com/p/a66f1ce2145a