JavaScript構造函數的繼承

現在有一個"動物"對象的構造函數。

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

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

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

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

 

一、 構造函數綁定

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

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

 

二、 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;

 

三、 直接繼承 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

 

四、 利用空對象作為中介

由於 "直接繼承 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 屬性。

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

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

 

五、 拷貝繼承

如果把父對象的所有屬性和方法，拷貝進子對象，也能夠實現繼承。

首先，把 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);    // 動物

 

至於非構造函數的繼承，請參考https://www.cnblogs.com/Leophen/p/11140586.html