Javascript基于對象的三大特征和C++,Java面向對象的三大特征一樣,都是封裝(encapsulation)、繼承(inheritance )和多態(polymorphism )。只不過實現的方式不同,其基本概念是差不多的。其實除三大特征之外,還有一個常見的特征叫做抽象(abstract),這也就是我們在一些書上有時候會看到面向對象四大特征的原因了。
一、封裝性
    封裝就是把抽象出來的數據和對數據的操作封裝在一起,數據被保護在內部,程序的其它部分只有通過被授權的操作(成員方法),才能對數據進行操作。
案例:
<html>   <head>     <script type="text/javascript">       function Person(name, agei, sal){         // 公開         this.name = name;         // 私有         var age = agei;         var salary = sal;       }       var p1 = new Person('zs', 20, 10000);       window.alert(p1.name + p1.age);     </script>   </head>   <body>   </body> </html> PS:JS封裝只有兩種狀態,一種是公開的,一種是私有的。
通過構造函數添加成員方法和通過原型法添加成員方法的區別
1、通過原型法分配的函數是所有對象共享的.
2、通過原型法分配的屬性是獨立.(如果你不修改屬性,他們是共享)
3、建議,如果我們希望所有的對象使用同一一個函數,最好使用原型法添加函數,這樣比較節省內存.
案例:
function Person(){  this.name="zs";  var age=20;  this.abc=function(){    window.alert("abc");  }  function abc2(){    window.alert("abc");  }}Person.prototype.fun1=function(){  window.alert(this.name);//ok  //window.alert(age);//no ok  //abc2();//no ok  this.abc();//ok}var p1=new Person();p1.fun1();特別強調:我們前面學習的通過prototype給所有的對象添加方法,但是這種方式不能去訪問類的私有變量和方法。
二、繼承性
繼承可以解決代碼復用,讓編程更加靠近人類思維。當多個類存在相同的屬性(變量)和方法時,可以從這些類中抽象出父類,在父類中定義這些相同的屬性和方法,所有的子類不需要重新定義這些屬性和方法,只需要通過繼承父類中的屬性和方法。
JS中實現繼承的方式
1、對象冒充
案例:
<html>   <head>     <script type="text/javascript">       function Stu(name, age){         this.name = name;         this.age = age;         this.show = function(){           window.alert(this.name + " " + this.age);         }       }       function MidStu(name, age) {         this.stu = Stu;         // 通過對象冒充來實現繼承的         // 對象冒充的意思就是獲取那個類的所有成員,因為js是誰調用那個成員就是誰的,這樣MidStu就有了Stu的成員了         this.stu(name, age);         this.payFee = function(){           window.alert("繳費" + money * 0.8);         }       }       function Pupil(name, age) {         this.stu = Stu;         // 通過對象冒充來實現繼承的         this.stu(name, age);         this.payFee = function(){           window.alert("繳費" + money * 0.5);         }       }        var midStu = new MidStu("zs", 13);       midStu.show();       var pupil = new Pupil("ls", 10);       pupil.show();     </script>   </head>   <body>   </body> </html> 2、通過call或者apply實現
案例:
<html> <head> <script type="text/javascript">   //1. 把子類中共有的屬性和方法抽取出,定義一個父類Stu   function Stu(name,age){     // window.alert("確實被調用.");     this.name=name;     this.age=age;     this.show=function(){       window.alert(this.name+"年齡是="+this.age);     }   }   //2.通過對象冒充來繼承父類的屬性的方法   function MidStu(name,age){     //這里這樣理解: 通過call修改了Stu構造函數的this指向,     //讓它指向了調用者本身.     Stu.call(this,name,age);     //如果用apply實現,則可以     //Stu.apply(this,[name,age]); //說明傳入的參數是 數組方式     //可以寫MidStu自己的方法.     this.pay=function(fee){       window.alert("你的學費是"+fee*0.8);     }   }   function Pupil(name,age){     Stu.call(this,name,age);//當我們創建Pupil對象實例,Stu的構造函數會被執行,當執行后,我們Pupil對象就獲取從 Stu封裝的屬性和方法     //可以寫Pupil自己的方法.     this.pay=function(fee){       window.alert("你的學費是"+fee*0.5);     }   }   //測試   var midstu=new MidStu("zs",15);   var pupil=new Pupil("ls",12);   midstu.show();   midstu.pay(100);   pupil.show();   pupil.pay(100); </script> </html> 小結:
1、JS對象可以通過對象冒充,實現多重繼承
2、Object類是所有Js類的基類
三、多態性
JS的函數重載
這個是多態的基礎,在之前的Javascript入門已經說過了,JS函數不支持多態,但是事實上JS函數是無態的,支持任意長度,類型的參數列表。如果同時定義了多個同名函數,則以最后一個函數為準。 
案例:
<html> <head> <script type="text/javascript">   //*****************說明js不支持重載*****   /*function Person(){     this.test1=function (a,b){       window.alert('function (a,b)');      }     this.test1=function (a){       window.alert('function (a)');     }   }   var p1=new Person();   //js中不支持重載.   //但是這不會報錯,js會默認是最后同名一個函數,可以看做是后面的把前面的覆蓋了。   p1.test1("a","b");   p1.test1("a");*/      //js怎么實現重載.通過判斷參數的個數來實現重載   function Person(){     this.test1=function (){       if(arguments.length==1){         this.show1(arguments[0]);       }else if(arguments.length==2){         this.show2(arguments[0],arguments[1]);       }else if(arguments.length==3){         this.show3(arguments[0],arguments[1],arguments[2]);       }     }     this.show1=function(a){       window.alert("show1()被調用"+a);     }     this.show2=function(a,b){       window.alert("show2()被調用"+"--"+a+"--"+b);     }     function show3(a,b,c){       window.alert("show3()被調用");     }   }   var p1=new Person();   //js中不支持重載.   p1.test1("a","b");   p1.test1("a"); </script> </html> 1、多態基本概念
多態是指一個引用(類型)在不同情況下的多種狀態。也可以理解成:多態是指通過指向父類的引用,來調用在不同子類中實現的方法。
案例:
<script type="text/javascript">   // Master類   function Master(name){     this.nam=name;     //方法[給動物喂食物]   }   //原型法添加成員函數   Master.prototype.feed=function (animal,food){     window.alert("給"+animal.name+" 喂"+ food.name);   }   function Food(name){     this.name=name;   }   //魚類   function Fish(name){     this.food=Food;     this.food(name);   }   //骨頭   function Bone(name){     this.food=Food;     this.food(name);   }   function Peach(name){     this.food=Food;     this.food(name);   }   //動物類   function Animal(name){     this.name=name;   }   //貓貓   function Cat(name){     this.animal=Animal;     this.animal(name);   }   //狗狗   function Dog(name){     this.animal=Animal;     this.animal(name);   }   //猴子   function Monkey(name){     this.animal=Animal;     this.animal(name);   }   var cat=new Cat("貓");   var fish=new Fish("魚");    var dog=new Dog("狗");   var bone=new Bone("骨頭");    var monkey=new Monkey("猴");   var peach=new Peach("桃");    //創建一個主人   var master=new Master("zs");   master.feed(dog,bone);   master.feed(cat,fish);   master.feed(monkey,peach); </script> 多態利于代碼的維護和擴展,當我們需要使用同一類樹上的對象時,只需要傳入不同的參數就行了,而不需要再new 一個對象。
以上就是Javascript基于對象三大特性,希望對大家的學習有所幫助。
新聞熱點
疑難解答