JS物件導向基礎篇（封裝 繼承 多態）

標籤：物件導向編程   array   war   特性   系統   ret   his   logs   turn   

首先我們要建立一個對象，我們可以利用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

JS物件導向基礎篇（封裝 繼承 多態）