先用一個(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)閷傩允枪灿玫陌妒郏蠹业闹刀家粯蛹＃瑹o(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);
};
拋開這個(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é)
可見原型幾乎貫穿了各種 JavaScript 繼承方式览爵。理解以及靈活利用原型是寫出優(yōu)秀代碼的關(guān)鍵。無(wú)論是繼承還是創(chuàng)建對(duì)象镇饮，最終理想的方案都是將幾種不同方式的優(yōu)點(diǎn)結(jié)合在一起蜓竹，這正是 JavaScript 靈活的魅力。
