JavaScript原型繼承添加方法屬性

在javascript中，一個函數，能夠包含變量，也能夠包含其它的函數，那麼，這樣子的話，咱們就能夠把變量作爲類的屬性，內部的函數則做爲成員方法了。那麼，外層的函數，就能夠當作是一個類了。

一、首先咱們寫一個動物類吧，其實他是一個函數，只不過咱們能夠把它當作這個類的構造函數

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

二、而後咱們能夠使用new關鍵字來建立一個myClass類的實例

var cat = new Animal();

這樣，咱們就建立了一個實例obj了，運行一下，使用相關的調試工具就能夠看到Call the constructor的調試信息了。也就證實，咱們建立類成功了。

三、那麼，接下來，咱們也能夠給構造函數加上參數，好比：

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

這樣子，咱們就能夠建立實例，而且訪問類的屬性了

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

這樣子，就能夠訪問到實例cat的屬性name了。

四、你們都知道，動物會跳會吃，那麼咱們怎麼給他加上方法呢?看下面

方法一：直接在構造函數裏面聲明方法

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....

五、上面咱們講到的，是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...」。

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

多態是指相同的操做或函數、過程可做用於多種類型的對象上並得到不一樣的結果。不一樣的對象，收到同一消息能夠產生不一樣的結果，這種現象稱爲多態。

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

爲了表達更明確，咱們再建立一個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();

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

六、那麼，假如我實例化一隻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();