先用一個(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 靈活的魅力。