JS 的繼承方式

一.原型鏈###

原型鏈的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法禀忆。每一個構(gòu)造函數(shù)都有一個原型對象百宇,原型對象都包含一個指向構(gòu)造函數(shù)的指針刻盐,而實例都包含一個指向原型對象的指針躬柬。如果:我們讓原型對象A等于另一個類型B的實例焦蘑,那么原型對象A就會有一個指針指向B的原型對象,相應(yīng)的B的原型對象中保存著指向其構(gòu)造函數(shù)的指針弥喉。假如B的原型對象又是另一個類型的實例郁竟,那么上述的關(guān)系依舊成立,如此層層遞進(jìn)由境,就構(gòu)成了實例與原型的鏈條

1.確定原型和實例的關(guān)系
通過兩種方式可以確定原型和實例之間的關(guān)系棚亩,第一種是使用instanceOf操作符,第二種是使用isPrototypeOf()方法虏杰。
實例 instanceOf 原型鏈 中出現(xiàn)過的構(gòu)造函數(shù)讥蟆,都會返回true
JavaScript中isPrototypeOf函數(shù)方法是返回一個布爾值,指出對象是否存在于另一個對象的原型鏈中纺阔。使用方法:object1.isPrototypeOf(object2)

2瘸彤、謹(jǐn)慎地定義方法
子類型有時候需要覆蓋超類型中的某個方法,或者需要添加超類型中不存在的莫個方法笛钝,注意:給原型添加方法的代碼一定要放在替換原型的語句之后质况。當(dāng)通過Child的實例調(diào)用getParentValue()時,調(diào)用的是這個重新定義過的方法玻靡,但是通過Parent的實例調(diào)用getParentValue()時结榄,調(diào)用的還是原來的方法。格外需要注意的是:必須要在Parent的實例替換原型之后囤捻,再定義這兩個方法潭陪。還有一點需要特別注意的是:通過原型鏈實現(xiàn)繼承時,不能使用對象字面量創(chuàng)建原型方法最蕾,因為這樣做會重寫原型鏈依溯。

3、原型鏈的問題
原型鏈很強大瘟则,可以利用它來實現(xiàn)繼承黎炉,但是也有一些問題,主要的問題還是包含引用類型值的原型屬性會被所有實例共享醋拧。因此我們在構(gòu)造函數(shù)中定義實例屬性慷嗜。但是在通過原型來實現(xiàn)繼承時,原型對象其實變成了另一個類型的實例丹壕。于是原先定義在構(gòu)造函數(shù)中的實例屬性變成了原型屬性了庆械。

二.借用構(gòu)造函數(shù)###

為了解決原型中包含引用類型值帶來的一些問題,引入了借用構(gòu)造函數(shù)的技術(shù)菌赖。這種技術(shù)的基礎(chǔ)思想是:在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)缭乘。
Parent.call(this)在新創(chuàng)建的Child實例的環(huán)境下調(diào)用了Parent構(gòu)造函數(shù)。在新創(chuàng)建的Child實例環(huán)境下調(diào)用Parent構(gòu)造函數(shù)琉用。這樣堕绩,就在新的Child對象上策幼,此處的kid1和kid2對象上執(zhí)行Parent()函數(shù)中定義的對象初始化代碼。這樣奴紧,每個Child實例就都會具有自己的friends屬性的副本了特姐。
借用構(gòu)造函數(shù)的方式可以在子類型的構(gòu)造函數(shù)中向超類型構(gòu)造函數(shù)傳遞參數(shù)
為了確保子類型的熟悉不會被父類的構(gòu)造函數(shù)重寫,可以在調(diào)用父類構(gòu)造函數(shù)之后黍氮,再添加子類型的屬性唐含。
構(gòu)造函數(shù)的問題:
構(gòu)造函數(shù)模式的問題,在于方法都在構(gòu)造函數(shù)中定義沫浆,函數(shù)復(fù)用無從談起捷枯,因此,借用構(gòu)造函數(shù)的模式也很少單獨使用件缸。

三.組合繼承###

組合繼承指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合在一塊铜靶,從而發(fā)揮二者之長叔遂。即:使用原型鏈實現(xiàn)對原型屬性和方法的繼承他炊,而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。
Person構(gòu)造函數(shù)定義了兩個屬性:name和friends已艰。Person的原型定義了一個方法sayName()痊末。Child構(gòu)造函數(shù)在調(diào)用Parent構(gòu)造函數(shù)時,傳入了name參數(shù)哩掺,緊接著又定義了自己的屬性age凿叠。然后將Person的實例賦值給Child的原型,然后又在該原型上定義了方法sayAge().這樣嚼吞,兩個不同的Child實例既分別擁有自己的屬性,包括引用類型的屬性盒件,又可以使用相同的方法了。
組合繼承避免了原型鏈和構(gòu)造函數(shù)的缺陷舱禽,融合了他們的有點炒刁,成為JavaScript中最常用的繼承模式。而且誊稚,instanceOf和isPropertyOf()也能夠識別基于組合繼承創(chuàng)建的對象翔始。

四.對象冒充###

對象冒充包括三種:臨時屬性方式、call()及apply()方式
1.臨時屬性方式:

function A(x){
  this.x=x;
      this.say = function(){
          alert('My name is '+this.name);
      }
}  
 function B(x,y){
  this.tmpObj=A;
  this.tmpObj(x);
  delete this.tmpObj;
  this.id = id;
      this.showId = function(){
           alert('Good morning,Sir,My work number is '+this.id);
      }
}
var simon = new B('Simon',9527);
simon.say();
simon.showId();
/*第5里伯、6城瞎、7行:創(chuàng)建臨時屬性tmpObj引用構(gòu)造函數(shù)A,然后在B內(nèi)部執(zhí)行疾瓮,執(zhí)行完后刪除脖镀。當(dāng)在B內(nèi)部執(zhí)行了 this.x=x后(這里的this是B的對象),B當(dāng)然就擁有了x屬性狼电,當(dāng)然B的x屬性和A的x屬性兩者是獨立认然,所以并不能算嚴(yán)格的繼承补憾。第5、6卷员、7行有更簡單的實現(xiàn)盈匾,就是通過call(apply)方法:A.call(this,x);*/

2.call()/apply()方式:實質(zhì)上是改變了this指針的指向

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     Person.call(this,name); //apply()方式改成Person.apply(this,[name]);
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();
 /*call和apply都可以實現(xiàn)繼承,唯一的一點參數(shù)不同毕骡,func.call(func1,var1,var2,var3)對應(yīng)的apply寫法為:func.apply(func1,[var1,var2,var3])削饵。區(qū)別在于 call 的第二個參數(shù)可以是任意類型,而apply的第二個參數(shù)必須是數(shù)組未巫,也可以是arguments窿撬。*/

通過對象冒充的方式,無法繼承通過prototype方式定義的變量和方法:

五.寄生式繼承###

基本思想:創(chuàng)建一個僅用于封裝繼承過程的函數(shù)叙凡,該函數(shù)在內(nèi)部以某種方式來增強對象劈伴,最后再像真正是它做了所有工作一樣返回對象。

function createAnother(original) {
     var clone = object(original);
     clone.sayHi = function () {
          alert("hi");
    };
    return clone;
}
var person = {
    name:"EvanChen",
    friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末握爷,一起剝皮案震驚了整個濱河市跛璧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌新啼,老刑警劉巖追城,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異燥撞,居然都是意外死亡座柱,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門物舒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冠胯,你說我怎么就攤上這事『#” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵盾碗,是天一觀的道長廷雅。 經(jīng)常有香客問我,道長航缀,這世上最難降的妖魔是什么商架? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮芥玉,結(jié)果婚禮上蛇摸,老公的妹妹穿的比我還像新娘。我一直安慰自己灿巧,他們只是感情好赶袄,可當(dāng)我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著抠藕,像睡著了一般饿肺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上盾似,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天敬辣,我揣著相機與錄音,去河邊找鬼零院。 笑死溉跃,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的门粪。 我是一名探鬼主播喊积,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼烹困,長吁一口氣:“原來是場噩夢啊……” “哼玄妈!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起髓梅,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤拟蜻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后枯饿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奢方,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡稿蹲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年苛聘,在試婚紗的時候發(fā)現(xiàn)自己被綠了唱捣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片震缭。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖徐裸,靈堂內(nèi)的尸體忽然破棺而出重贺,到底是詐尸還是另有隱情,我是刑警寧澤潜圃,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站隧出,受9級特大地震影響胀瞪,放射性物質(zhì)發(fā)生泄漏凄诞。R本人自食惡果不足惜帆谍,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一驱负、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧苛吱,春花似錦绘雁、人聲如沸庐舟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽摊求。三九已至室叉,卻和暖如春太惠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缚柳。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留构舟,地道東北人弹澎。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓殴胧,卻偏偏與公主長得像团滥,于是被迫代替她去往敵國和親灸姊。 傳聞我的和親對象是個殘疾皇子厨钻,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,781評論 2 354

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

  • 繼承 Javascript中繼承都基于兩種方式:1.通過原型鏈繼承苍蔬,通過修改子類原型的指向俺猿,使得子類實例通過原型鏈...
    LeoCong閱讀 310評論 0 0
  • 博客內(nèi)容:什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對象屬性創(chuàng)建對象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,424評論 3 12
  • 本章內(nèi)容 理解對象屬性 理解并創(chuàng)建對象 理解繼承 面向?qū)ο笳Z言有一個標(biāo)志,那就是它們都有類的概念谊惭,而通過類可以創(chuàng)建...
    悶油瓶小張閱讀 851評論 0 1
  • 昨天的云棲大會上,馬云侃侃而談自己的職業(yè)理想和奮斗方向悄雅,并且自娛自樂的唱了四首歌宽闲,不去評價歌唱的好與壞,因為那不重...
    六爺biu一biu閱讀 141評論 0 1
  • 生活會在我們不經(jīng)意中帶個我們很多契機我碟,有時我們會忽略它矫俺,讓它悄無聲息地來了又悄悄的走了厘托,好像它從來沒有出現(xiàn)過铅匹!有時...
    藝菲_夏閱讀 405評論 0 8