維克的煩惱

物件的繼承(二)--複製屬性的第一種方法

詳細內容

分類：Javascript

發佈：2013-07-30, 週二 23:52

點擊數：2652

物件的繼承(二)--複製屬性的第一種方法：

上次我們在物件的繼承中提到使用原型(prototype)來進行繼承，而使用原型繼承的特點就是屬性的共享，這很好，但是也有不對時的時候，總是有些時候我們希望繼承一些屬性，但卻不願意和人共享。譬如說我有個creature物件，我想要繼承他的name屬性，但我總不能跟別人共享這name屬性吧。

把這想法畫成圖形大概就會像下面這圖：我希望能繼承一些屬性或是方法，而且專屬於自己的物件，譬如creature中的creature_type。還有一些屬性或方法是單單存在於自己的物件之中，譬如human中的angrymode。這種做法的好處是，有些通用的屬性要被額外加入時，不需要修改每個建構函式，只需要修改被繼承的物件就可以了。

要達到這樣的目的，有一種作法是將creature獨立寫成一個函式，然後在human與dragon的建構函式中使用call或是apply來呼叫他，這樣可以讓我們直接複製creature中的所有屬性而且不會共享。現在我們用一個範例來看看這如何實踐：

<script type="text/javascript">
function creature(){//定義creature
  var creature_type="";  //私有屬性
  var name="";
  var hp="";
  this.age=0;            //公開屬性
  this.setCreature_type=function(c){
    creature_type=c.toString();  
  }
  this.getCreature_type=function(){
    return creature_type;
  }
  this.setName=function(s){
      name=s.toString();
  }
  this.getName=function(){
    return name;
  }
}
function human(name){   //human建構函式
  creature.call(this);  //在human的建構函式中呼叫creature.call(this)
  this.setCreature_type("人類");
  this.setName(name);
  this.angrymode=function(){    //專屬於human的方法
    //do something
  }
}
function dragon(name){  //dragon建構函式 
  creature.call(this);  //在dragon的建構函式中呼叫creature.call(this)
  this.setCreature_type("龍族");
  this.setName(name);
  this.magic_invalid=function(){   //專屬於dragon的方法
    //do something
  }
}
var player1=new human("維克");
var dragonnNPC1=new dragon("維多利亞");
alert("種族："+player1.getCreature_type()+"  姓名："+player1.getName());
//輸出: 種族：人類  姓名：維克
alert("種族："+dragonnNPC1.getCreature_type()+"  姓名："+dragonnNPC1.getName());
//輸出: 種族：龍族  姓名：維多利亞
</script>

從結果來看很明顯就能發現human與dragon都各自繼承了creature中定義的屬性。而且不會互相干擾。如果仔細想想還會發現，這種做法可以模擬出多重繼承的特性。只要簡單的在建構函式中使用function.call(this)就能繼承其他物件的屬性。簡單好用。

• 前一個
• 下一個