先用一個(gè)簡(jiǎn)單的 Person 類作為文章其它例子的前提。

function Person(name) {
    if(name !== undefined) {
        this.name = name;
    } else {
        this.name = "StrayBugs";
    }
    this.age = 22;
}
Person.prototype.sayName = function() {
    alert(this.name);
};

1 原型鏈
JavaScript 中實(shí)現(xiàn)繼承第一個(gè)方法是利用原型鏈。

繼承就是要讓子類獲得父類的屬性和方法。原型鏈的思路是利用原型共享的特點(diǎn)，讓父類的一個(gè)實(shí)例充當(dāng)子類的原型。父類的實(shí)例必然包括了父類的屬性與方法，那么子類的所有實(shí)例都可以通過(guò)原型鏈一層層找到父類的屬性與方法了。

新手很可能會(huì)在這里混淆，請(qǐng)分析出下面三種代碼中原型與實(shí)例的屬性與方法。

function Man() {
}
//第一種
Man.prototype = Person;
var man = new Man();
//第二種
Man.prototype = Person();
var man = new Man();
//第三種
Man.prototype = new Person();
var man = new Man();

第一種：Man.prototype 獲得的是 Person函數(shù)的指針，也就是說(shuō)，Man.prototype 就是 Person 函數(shù)。這里沒(méi)有任何調(diào)用 Man.prototype 的代碼，且 Man 是個(gè)空函數(shù)，所以其實(shí)例 man 的內(nèi)部屬性 [[prototype]]值指向 Person函數(shù)。

第二種：構(gòu)造函數(shù)本質(zhì)也是函數(shù)。Person() 相當(dāng)于執(zhí)行了構(gòu)造函數(shù)并將返回值賦給原型。因?yàn)?Person() 沒(méi)有 return，故返回值為 undefined，于是代碼等價(jià)于 Man.prototype = undefined;，所以 man 的 [[prototype]] 值為 Object。

第三種：正解。創(chuàng)建了一個(gè) Person 實(shí)例，有了屬性與方法。Man的所有實(shí)例將共享這個(gè) Person
實(shí)例。

原型鏈的缺點(diǎn)與創(chuàng)建對(duì)象的原型模式一樣，適合用來(lái)繼承方法，不適合繼承屬性。因?yàn)橐话闱闆r下我們都希望各個(gè)實(shí)例的屬性值是獨(dú)立的。而且，因?yàn)閷傩允枪灿玫?，大家的值都一樣，無(wú)法針對(duì)某個(gè)實(shí)例去初始化。

2 借用構(gòu)造函數(shù)

與創(chuàng)建對(duì)象的思路類似，這里對(duì)應(yīng)構(gòu)造器模式的是借用構(gòu)造函數(shù)（Constructor Stealing）技術(shù)。就是在子類的構(gòu)造函數(shù)中通過(guò) 父類.apply(this)或者 父類.call(this) 來(lái)借用父類構(gòu)造器。這時(shí)每個(gè)實(shí)例都有單獨(dú)的副本，互不影響，所以可以在構(gòu)造函數(shù)中傳入?yún)?shù)進(jìn)行初始化。

function Man(name) {
    //每個(gè)實(shí)例都可以有自己的名字
    Person.call(this, name);
    //子類增加的屬性
    this.job = 'student';
}
var man1 = new Man();
var man2 = new Man('Jesse');
alert(man1.name); //"StrayBugs"
alert(man2.name); //"Jesse"
alert(man1.sayName); //undefined
alert(man2.sayName); //undefined

其缺點(diǎn)與構(gòu)造函數(shù)模式一樣，沒(méi)有繼承原型鏈，方法沒(méi)有共享。

3 組合繼承

參考創(chuàng)建對(duì)象的“組合使用構(gòu)造函數(shù)模式和原型模式”，這里也可以組合構(gòu)造函數(shù)與原型鏈來(lái)實(shí)現(xiàn)繼承，叫做組合繼承（Combination Inheritance）。是 JavaScript 中最常用的繼承模式。

function Man(name) {
    //每個(gè)實(shí)例都可以有自己的名字
    Person.call(this, name);
    //子類增加的屬性
    this.job = 'student';
}
//繼承方法
Man.prototype = new Person();
Man.prototype.constructor = Man;
//子類增加的方法
Man.prototype.sayAge = function() {
    alert(this.age);
};
var man1 = new Man();
var man2 = new Man('Jesse');
man1.sayName(); //"StrayBugs"
man2.sayName(); //"Jesse"
man2.sayAge();  //22
alert(man1 instanceof Man);    //true
alert(man1 instanceof Person); //true
alert(man1.constructor.prototype.isPrototypeOf(man2)); //true

可以看到instanceof 與isPrototypeOf都可以正常工作。

再畫個(gè)圖加深理解。

可以看到，這個(gè)方法還是有點(diǎn)小缺陷。就是子類的原型上還保留了一份無(wú)用的共用屬性。

5 原型式繼承

原型式繼承（Prototypal Inheritance）很特別，它希望利用現(xiàn)有的對(duì)象去繼承該對(duì)象的類。說(shuō)白了，就是前文的原型鏈繼承那里，將 new Person()換成一個(gè)現(xiàn)有的對(duì)象（比如 Person的一個(gè)現(xiàn)有的實(shí)例）。封裝起來(lái)就是這個(gè)樣子：

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

可以看到，原理上是跟原型鏈一樣的，可以看做是原型鏈的簡(jiǎn)化版，在只需簡(jiǎn)單地淺復(fù)制一個(gè)對(duì)象時(shí)很有用。但同時(shí)要注意原型的潛在問(wèn)題，如下面的例子：

var person = new Person();
var man = object(person);
man.name = 'Jesse';
man.sayName(); //"Jesse"
alert(man.age);  //22
person.name = 'StrayBugs';
person.age = 101;
man.sayName(); //"Jesse"
alert(man.age);  //101

ECMAScript5 新增 Object.create() 方法規(guī)范化了原型式繼承。

5 寄生式繼承

這時(shí)你也許會(huì)想，可不可以在原型式繼承的基礎(chǔ)上再添加方法？當(dāng)然可以，這就是寄生式繼承（Parasitic Inheritance），且寄生式繼承不局限于原型式繼承。

顧名思義，這里可以聯(lián)想起寄生構(gòu)造函數(shù)模式，也就是工廠模式的變種。寄生式繼承可以看做是原型式繼承的增強(qiáng)版。

function createMan(person) {
    //這里不一定是 object()，可以是任意能返回新對(duì)象的函數(shù)
    var man = object(person);
    man.sayAge = function() {
        alert(this.age);
    };
    return man;
}
var person = new Person();
var man = createMan(person);
man.sayAge(); //22

這里也可以看到，寄生式繼承對(duì)象的方法沒(méi)有復(fù)用。

6 寄生組合式繼承
前面組合繼承結(jié)尾的時(shí)候提了一下，子類的原型上會(huì)保留了一份無(wú)用的屬性。這是因?yàn)槭褂媒M合繼承會(huì)調(diào)用兩次父類構(gòu)造函數(shù)。第一次調(diào)用是為子類添加原型 new Person() 的時(shí)候，第二次是子類構(gòu)造函數(shù)內(nèi)部調(diào)用 Person.call(this, name) 。寄生組合式繼承解決了這個(gè)問(wèn)題。第一次調(diào)用構(gòu)造函數(shù)的目的就是為了得到父類的原型，那么有了原型式繼承的淺復(fù)制方法，我們就可以直接復(fù)制原型了嘛。

function inheritPrototype(Man, Person) {
    //只復(fù)制原型
    var p = object(Person.prototype);
    p.constructor = Man;
    Man.prototype = p;
}

定義：

function Man(name) {
    Person.call(this, name);
    this.job = 'student';
}
inheritPrototype(Man, Person);
Man.prototype.sayAge = function() {
    alert(this.age);
};

拋開(kāi)這個(gè)函數(shù)去看其實(shí)就是原型鏈繼承中將 new Person()換成object(Person.prototype)。 instanceof與isPrototypeOf對(duì) Person 依然有效。

var man = new Man('Jesse');
man.sayAge(); //22
alert(man instanceof Man); //true
alert(man instanceof Person); //true
alert(Man.prototype.isPrototypeOf(man)); //true
alert(Person.prototype.isPrototypeOf(man)); //true

再畫個(gè)圖加深理解，跟原型鏈比較。

7 總結(jié)

可見(jiàn)原型幾乎貫穿了各種 JavaScript 繼承方式。理解以及靈活利用原型是寫出優(yōu)秀代碼的關(guān)鍵。無(wú)論是繼承還是創(chuàng)建對(duì)象，最終理想的方案都是將幾種不同方式的優(yōu)點(diǎn)結(jié)合在一起，這正是 JavaScript 靈活的魅力。