JvaeScript 繼承問(wèn)題總結(jié)

先用一個(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

可以看到instanceofisPrototypeOf都可以正常工作腌零。

再畫個(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)轻局。 instanceofisPrototypeOf對(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 靈活的魅力。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末储藐,一起剝皮案震驚了整個(gè)濱河市俱济,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钙勃,老刑警劉巖蛛碌,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異辖源,居然都是意外死亡蔚携,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門克饶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)酝蜒,“玉大人,你說(shuō)我怎么就攤上這事矾湃⊥瞿裕” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵邀跃,是天一觀的道長(zhǎng)霉咨。 經(jīng)常有香客問(wèn)我,道長(zhǎng)坞嘀,這世上最難降的妖魔是什么躯护? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任惊来,我火速辦了婚禮丽涩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己矢渊,他們只是感情好继准,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著矮男,像睡著了一般移必。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上毡鉴,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天崔泵,我揣著相機(jī)與錄音,去河邊找鬼猪瞬。 笑死憎瘸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的陈瘦。 我是一名探鬼主播幌甘,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼痊项!你這毒婦竟也來(lái)了锅风?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鞍泉,失蹤者是張志新(化名)和其女友劉穎皱埠,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咖驮,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡漱逸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了游沿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片饰抒。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖诀黍,靈堂內(nèi)的尸體忽然破棺而出袋坑,到底是詐尸還是另有隱情,我是刑警寧澤眯勾,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布枣宫,位于F島的核電站,受9級(jí)特大地震影響吃环,放射性物質(zhì)發(fā)生泄漏也颤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一郁轻、第九天 我趴在偏房一處隱蔽的房頂上張望翅娶。 院中可真熱鬧文留,春花似錦、人聲如沸竭沫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春桐早,著一層夾襖步出監(jiān)牢的瞬間境输,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓译柏,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親姐霍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鄙麦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容