JavaScript構造函數的繼承

如今有一個"動物"對象的構造函數。

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

還有一個"貓"對象的構造函數。

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

怎樣才能使"貓"繼承"動物"呢？

 

1、 構造函數綁定

使用 call 或 apply 方法，將父對象的構造函數綁定在子對象上，即在子對象構造函數中加一行：

function Cat(name,color){
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
}
var cat1 = new Cat("AA貓","黑色");
alert(cat1.species);    // 動物

 

2、 prototype 模式

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

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("AA貓","黑色");
alert(cat1.species);    // 動物

上面，咱們將 Cat 的 prototype 對象指向一個 Animal 的實例。

Cat.prototype = new Animal();

它至關於徹底刪除了 prototype 對象原先的值，而後賦予一個新值。

Cat.prototype.constructor = Cat;

任何一個 prototype 對象都有一個 constructor 屬性，指向它的構造函數。

若是沒有 Cat.prototype = new Animal(); 這一行，Cat.prototype.constructor 是指向Cat的，加了這一行之後，Cat.prototype.constructor 指向 Animal。

alert(Cat.prototype.constructor == Animal);    //true

另外，每一個實例也有一個 constructor 屬性，默認調用 prototype 對象的 constructor 屬性。

alert(cat1.constructor == Cat.prototype.constructor);    // true

所以，在運行 Cat.prototype = new Animal(); 這一行以後，cat1.constructor 也指向 Animal。

alert(cat1.constructor == Animal);    // true

這顯然會致使繼承鏈的紊亂（cat1明明是用構造函數Cat生成的），所以須要手動糾正，將 Cat.prototype 對象的 constructor 值改成 Cat。

若是替換了 prototype 對象，

o.prototype = {};

那麼，下一步是爲新的 prototype 對象加上 constructor 屬性，並將這個屬性指回原來的構造函數。

o.prototype.constructor = o;

 

3、 直接繼承 prototype

因爲 Animal 對象中，不變的屬性均可以直接寫入 Animal.prototype。

因此，咱們可讓 Cat() 跳過 Animal()，直接繼承 Animal.prototype。

先將 Animal 對象改寫：

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

而後，將 Cat 的 prototype 對象，指向 Animal 的 prototype 對象，這樣就完成了繼承。

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("AA貓","黑色");
alert(cat1.species);    // 動物

與前一種方法相比，這樣作效率更高（不用執行和創建 Animal 的實例），並且更省內存。

但 Cat.prototype 和 Animal.prototype 如今指向了同一個對象，那麼任何對 Cat.prototype 的修改，都會反映到 Animal.prototype。

因此，上面代碼第二行實際上是有問題的：

Cat.prototype.constructor = Cat;

這裏實際上把 Animal.prototype 對象的 constructor 屬性也改掉了！

alert(Animal.prototype.constructor);    // Cat

 

4、 利用空對象做爲中介

因爲 "直接繼承 prototype " 存在上述的缺點，因此就有第四種方法，利用一個空對象做爲中介。

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

F是空對象，因此幾乎不佔內存。

這時，修改 Cat 的 prototype 對象，就不會影響到 Animal 的 prototype 對象。

alert(Animal.prototype.constructor);    // Animal

咱們將上面的方法，封裝成一個函數，便於使用。

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

使用的時候，方法以下

extend(Cat,Animal);
var cat1 = new Cat("AA貓","黑色");
alert(cat1.species);    // 動物

這個 extend 函數，就是 YUI 庫如何實現繼承的方法。

另外，在函數體最後一行

Child.uber = Parent.prototype;

意思是爲子對象設一個 uber 屬性，這個屬性直接指向父對象的 prototype 屬性。

這至關於在子對象上打開一條通道，可直接調用父對象的方法。

這一行放在這裏，只是爲了實現繼承的完備性，純屬備用性質。

 

5、 拷貝繼承

若是把父對象的全部屬性和方法，拷貝進子對象，也可以實現繼承。

首先，把 Animal 的全部不變屬性，都放到它的 prototype 對象上。

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

而後，再寫一個函數，實現屬性拷貝的目的。

function extend2(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
        c[i] = p[i];
    }
    c.uber = p;
}

這個函數的做用，就是將父對象的 prototype 對象中的屬性，所有拷貝給 Child 對象的 prototype 對象。

使用時這樣寫：

extend2(Cat, Animal);
var cat1 = new Cat("AA貓","黑色");
alert(cat1.species);    // 動物

 

至於非構造函數的繼承，請參考http://www.javashuo.com/article/p-dfcsejfb-hz.html