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