JavaScript原型繼承

最近接觸了一下HTML 5，當然，接觸過HTML 5的人都知道，html5也不過是提供一些新的標籤而已，至於整下實現的核心，還是在javascript這裡。暑假還搞了ext4的web desktop，更多的也是javascript的東西。對於javascript，以前就只會document.getElementById()和alert()，現在才開始慢慢深入瞭解。如果本文有什麼不對的地方，請指出。

關於javasript，它是基於對象的，因此，它沒有類的概念，所以，如果要實現繼承，也就只能是利用javascript的原型機制prototype去實現了。(其實這裡是錯的，感謝 @記憶的森林 的提示，還可以用apply和call去實現)

因為javascript沒有專門的機制去實作類別，所以這裡只能是藉助它的函數能夠嵌套的機制來類比實作類別。在javascript中，一個函數，可以包含變數，也可以包含其它的函數，那麼，這樣子的話，我們就可以把變數做為類的屬性，內部的函數則作為成員方法了。那麼，外層的函數，就可以看成是一個類了。

1、首先我們寫一個動物類吧，其實他是一個函數，只不過我們可以把它看成這個類的建構函式

 

  
function Animal(){  
  
     console.log('Call the constuctor.');  
  
 } 
 

2、然後我們可以使用new關鍵字來建立一個myClass類的執行個體

 

  
var cat = new Animal(); 
 

這樣，我們就建立了一個執行個體obj了，運行一下，使用相關的調試工具就可以看到Call the constructor的調試資訊了。也就證明，我們建立類成功了。

3、那麼，接下來，我們也可以給建構函式加上參數，比如：

 

  
function Animal(name){  
  
    this.name = name;  
  
} 
 

這樣子，我們就可以建立執行個體，並且訪問類的屬性了

 

  
function myClass(name){  
  
    this.name = name;  
  
}  
  
var cat = new myClass("Kate");  
  
alert(cat.name); 
 

這樣子，就可以訪問到執行個體cat的屬性name了。

4、大家都知道，動物會跳會吃，那麼我們怎麼給他加上方法呢?看下面

方法一：直接在建構函式裡面聲明方法

 

  
function Animal(name){  
  
    this.name = name;  
  
    this.jump = function(){  
  
        alert (this.name + " is jumping...");  
  
    };  
  
 
  
    this.eat = function(){  
  
        alert (this.name + " is eatting...");  
  
    };  
  
}  
  
 
  
var cat = new Animal("Kate");  
  
 
  
alert(cat.name);  
  
cat.jump();  
  
cat.eat(); 
 

方法二：利用prototype為類添加方法

 

  
function Animal(name){  
  
    this.name = name;  
  
}  
  
 
  
Animal.prototype = {  
  
          
  
    type : 'cat',  
  
 
  
    jump : function(){  
  
        alert (this.name + " is jumping...");  
  
    },  
  
 
  
    eat : function(){  
  
        alert (this.name + " is eatting...");              
  
    }  
  
 
  
}  
  
 
  
var cat = new Animal("Kate");  
  
 
  
alert(cat.name);  
  
alert(cat.type);  
  
cat.jump();  
  
cat.eat(); 
 

同樣的，我們也可以用同樣的方法為類添加新的屬性，如type....

5、上面我們講到的，是javascipt中，怎麼建立一個類，以及怎麼為類添加屬性以及方法，接下來，我們談一下怎麼實作類別的繼承。

要實現繼承，我們可以通過prototype實作類別的繼承，首先，我們要先聲明一個Dog類(如果還不懂，請重新看上面相關內容)，並且讓它繼承Animal類。

 

  
function Dog(){};  
  
Dog.prototype = new Animal("Henry"); 
 

然後我們可以執行個體化一隻新的狗dog出來，試著調用它的方法，看看成功了嗎?

 

  
function Dog(){};  
  
Dog.prototype = new Animal("Henry");  
  
 
  
var dog = new Dog();  
  
dog.jump();  
  
dog.eat(); 
 

顯然，如果代碼沒敲錯的話，應該可以看到提示“Henry is jumping...”，“Henry is eatting...”。

6、既然實現了類的繼承，那就必然想到另外一個問題，那就是多態的問題。

多態是指相同的操作或函數、過程可作用於多種類型的對象上並獲得不同的結果。不同的對象，收到同一訊息可以產生不同的結果，這種現象稱為多態。

通過繼承，子類已經繼承了父類的方法了，但要實現多態，勢必對子類的方法進行重寫。

為了表達更明確，我們再建立一個Pig類出來，並且繼承Animal類。怎麼建立我就不說了。建立完的代碼應該是像現在這樣子。

 

  
function Dog(){};  
  
Dog.prototype = new Animal("Henry");  
  
 
  
function Pig(){};  
  
Pig.prototype = new Animal("Coco");  
  
 
  
var dog = new Dog();  
  
dog.jump();  
  
dog.eat();  
  
 
  
var pig = new Pig();  
  
 
  
pig.jump();  
  
pig.eat(); 
 

運行之後，因為繼承了Animal類的原因，結果肯定又是“XX is jumping...”，“XX is eatting...”了，那我們要實現的，就是進行方法的重寫。我們可以有下面的方式實現方法的重寫。

 

  
function Dog(){};//建立dog子類  
  
Dog.prototype = new Animal("Henry");  
  
//重寫dog的方法  
  
Dog.prototype.jump = function(){  
  
    alert("Hi, this is " + this.name + ", I'm jumping...")  
  
};  
  
Dog.prototype.eat = function(){  
  
    alert("Henry is eatting a bone now.");      
  
};  
  
 
  
function Pig(){};//建立pig子類  
  
Pig.prototype = new Animal("Coco");  
  
//重寫pig的方法  
  
Pig.prototype.jump = function(){  
  
    alert("I'm sorry. " + this.name + " can not jump.");  
  
};  
  
Pig.prototype.eat = function(){  
  
    alert("Hi, I'm " + this.name + ", I'm eatting something delicious.");  
  
}  
  
 
  
var dog = new Dog();  
  
dog.jump();  
  
dog.eat();  
  
 
  
var pig = new Pig();  
  
 
  
pig.jump();  
  
pig.eat(); 
 

運行一下，是不是實現了對方法的重寫呢??

6、那麼，假如我執行個體化一隻dog之後，我想單獨為這隻dog添加屬性和方法，怎麼做呢?看下面

 

  
var dog = new Dog();  
  
//添加屬性和方法  
  
dog.type = "Doberman Pinscher";  
  
dog.shout = function(){  
  
    alert("I'm a " + this.type + ".");  
  
}  
  
dog.jump();  
  
dog.eat();  
  
//調用新的方法  
  
dog.shout(); 
 

7、好了，這篇文章就寫到這裡了。相信初學者對於類的建立與繼承應該有一定的瞭解了。

原文：http://www.cnblogs.com/chenmj/archive/2011/08/28/2156294.html