物件導向的Javascript（5）：繼承

        在小項目中對於JavaScript使用，只要寫幾個function就行了。但在大型項目中，尤其是在開發追求 良好的使用者體驗的網站中，如SNS,就會 用到大量的JavaScrpt，有時JavaScript的工作量勝過了C#，這時寫一堆function,就會顯得很亂，雜亂無章，甚至會出現命名衝突，管理和維 護起來都很麻煩。對於這種情況我們就需要使用物件導向的思想來開發JavaScript。那我們就這樣作罷：

　　所有物件導向的語言都應該有繼承的特性，JavaScript 也不例外。
　　在JavaScript中實現繼承可以有多種方法，下面說兩種常見的。

　　一，call 繼承，先看代碼：
　　先定義一個“人”類

//人類
Person=function(){
    this.name="草泥馬";
    this.eat=function(){
        alert("我要吃飯");
    }
    
    this.sleep=function(){
       alert("我要睡覺");  
    }

}

　　再定義一個學生類，讓它繼承於Person

//學生類
Student=function(){
    Person.call(this);//繼承Person類
    this.doHomework=function(){
        alert("老師來了，作業借我抄下");
    }
   
}

　　關鍵看 Person.call(this)這句,其中this代表當前對象，即Student ，這很容易理解，而Person.call(this)的意思是：將Person類的所有的公開成員“附加”給Student類，讓Student也具有了Person的所有功能。
　　和進階語言一樣，如果子類中出現了和父類中同名的成員，則會將其覆蓋，也就是所謂的“重寫”了。

　　同樣的，我們再定義一個女孩類 ：

//女孩類
Girl=function(){
    Person.call(this);//繼承Person類
    this.sex="女";
}

 　　JavaScript是可以實現多重繼承的，請看下面的Master(碩士)類，這個Master 自然是個學生，但同時又是個漂亮MM,於是有了下面的代碼：

//碩士類
Master=function(){
    Student.call(this);//繼承Student類
    Girl.call(this);//繼承Girl類
    this.degree="碩士";//學曆
    
}

 　　我們可以測試一下：

var master=new Master();
master.name="鳳姐";
master.eat();
master.doHomework();
alert("偶是名字叫："+master.name);
alert("偶的性別是："+master.sex);

　　多重繼承時要注意順序，如果兩個類中有相同名稱的成員，那麼後一個將覆蓋前一個，也就是說當前類只會繼承後一個類中的成員。
　　call 方法繼承就說到這，如果大家對call方法不清楚，就請去問問Google兄，我就不贅述了,網上轉載得不要太多。下面說下另外一種繼承方式。

　　二，prototype 原型繼承：

　　我們再定義一個班長類：

//班長類
SquadLeader=function (){
    //打招呼
    this.hi=function(){
        alert("同學們好，我現在是班長了");
    }
}

　　上面定義了一個碩士類，現在這個碩士被提升為班長了，所以這個Master要繼承SquadLeader了，這次我們用prototype 來實現，請看下面代碼：

Master.prototype=new SquadLeader();//prototype 屬性指向一個對象 
//或者
//Master.prototype=SquadLeader.prototype;

　　這樣Master就繼承了SquadLeader類，就這麼一句話，這裡有兩種形式，其實原理是一樣的。意思是：將SquadLeader的“靈魂”拷貝給了Master，於是從此SquadLeader能做的事，Master都可以做了。
　    測試一下：

  var master=new Master();
  master.hi()//輸出“同學們好，我現在是班長了”　　

　　

　　我個人比較喜歡用第一種方案(call 繼承)來實現繼承，所有代碼都包在一個“{}”內，一目瞭然，在書寫風格上較之於第二種更接近於C#。prototype 屬性我一般用來對已有的類做擴充。

　　JavaScript是門非常靈活的語言，實現繼承可能還有其他更好的方式，大家可以去研究挖掘，我在這就當是拋了塊磚頭， 希望能引出華美的玉石！

 

 原文地址：http://www.cnblogs.com/xumingxiang/archive/2010/05/01/1725680.html

作者 : 徐明祥
出處：http://www.cnblogs.com/xumingxiang 
著作權：本文著作權歸作者和部落格園共有
轉載：歡迎轉載，為了儲存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文串連；否則必究法律責任