JavaScript中的繼承

JavaScript中的繼承

如下討論中，咱們以Animal做爲父類，Cat做爲子類，使Cat繼承Animal。

//父類Animal
function Animal(){
    this.species="動物";
}

//子類Cat
function Cat(name, color){
    this.name=name;
    this.color=color;
}

---

1、構造函數繼承

使用call、apply方法，將父對象的構造函數綁定在子對象上.

代碼以下：

function Cat(name, color){
    Animal.call(this, arguments);
    this.name=name;
    this.color=color;
}

---

2、prototype模式

若是Cat.prototype對象指向一個Animal實例，那麼全部的Cat的實例就能繼承Animal了.

代碼以下：

/**
*每一個構造函數都有一個原型對象(prototype)，這個原型對象是這個函數全部實例的原型（proto）.
*每一個原型對象都有一個constructor屬性，指向它的構造函數.
*每一個實例也有一個constructor屬性，默認調用prototype的constructor屬性.
*/

//將Cat的原型對象設置爲Animal的實例
Cat.prototype=new Animal();

//手動糾正Cat.prototype.constructor , 若是不糾正將指向Animal
Cat.prototype.constructor=Cat;

---

3、直接繼承prototype

因爲Animal對象中，不變的屬性均可以直接寫入Animal.prototype中，因此咱們能夠讓Cat跳過Animal，直接繼承Animal.prototype.

代碼以下：

//改寫Animal
function Animal(){}
Animal.prototype.species="動物";

//將Cat.prototype指向Animal.prototype，就完成了繼承
Cat.prototype=Animal.prototype;

//手動糾正constructor指向
Cat.prototype.constructor=Cat;

---

4、利用空對象做爲中介

空對象幾乎不佔用空間，且這時修改Cat的prototype對象，不會影響Animal的prototype對象.

代碼以下：

var F=function(){};
F.prototype=Animal.prototype;

//將原型執行一個空對象
Cat.prototype=new F();

//仍是手動修改constructor的指向
Cat.prototype.constructor=Cat;

能夠將上面的方法封裝成一個函數

function extend(child, parent){
    var F=function(){};
    F.prototype=parent.prototype;
    child.prototype=new F();
    child.prototype.constructor=child;
}

---

總結：繼承的方法有多種，核心思想是控制prototype指向，切記糾正constructor的指向 。