JS的幾種繼承方式

一 原型繼承

function Parent(){

? ? this.color = 'red'

}

Parent.prototype.getName = function(){

? ? console.log(this.name)

}

function Child(){}

Child.prototype = new Parent();//將父類的實例賦給子類的原型

var child1 = new Child();

child1;

child1通過指針__proto__指向其原型對象(其原型對象又指向他的原型對象)撞芍,其原型對象分為兩部分悄雅,從構造函數(shù)中繼承的實例屬性color稽犁,和從原型對象中繼承的斟赚。

補充:原型對象的構造函數(shù)是函數(shù)本身绸贡,因此每個構造函數(shù)的prototype對象可以看做一個實例化對象。

優(yōu)點:可以繼承構造函數(shù)屬性砖第,也可繼承原型屬性绍移。

缺點:

1.首先屬性值為引用類型值的原型屬性被修改后可能會影響到所有的實例,而該種繼承方式中急凰,構造函數(shù)中的屬性會繼承到子類型女仰,成為子類的原型對象的屬性。(這也是為什么要在構造函數(shù)中定義屬性抡锈,在原型中定義公共方法)

2.在創(chuàng)建子類的實例時疾忍,不能向父類的構造函數(shù)中傳遞參數(shù)。

二.借用構造函數(shù)

function Parent(name){

? ? this.name = name;

? ? this.colors = ['red','green','pink'];

}

Parent.prototype.getName = function(){

? ? console.log(this.name)

}

function Child(){

? ? Parent.call(this,'Mary');//使用call()方法繼承父類構造函數(shù)中的屬性

? ? this.age = '18';

}

var child1 = new Child();

var child2 = new Child();

優(yōu)點:避免了原型繼承中的兩個缺點床三,可以向父類傳參一罩,且不會造成原型屬性共享的問題(因為父類構造函數(shù)中的屬性繼承到子類構造函數(shù)中,而非原型對象中)撇簿。

缺點:不能繼承原型屬性擒抛,無法實現(xiàn)函數(shù)復用推汽,所有方法都只能放在構造函數(shù)中。

三.組合繼承

functionSuperType(name){

this.name = name;

this.colors = ["red","blue","green"];

}

SuperType.prototype.sayName =function(){

alert(this.name);

}

functionSubType(name, age){

// 繼承屬性

SuperType.call(this, name);

this.age = age;

}

// 繼承方法

SubType.prototype =newSuperType();

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge =function(){

alert(this.age);

};

varinstance1 =newSubType("Nicholas",29);

instance1.colors.push("black");

alert(instance1.colors);//"red,blue,green,black"

instance1.sayName();//"Nicholas";

instance1.sayAge();//29

varinstance2 =newSubType("Greg",27);

alert(instance2.colors);//"red,blue,green"

instance2.sayName();//"Greg";

instance2.sayAge();//27

2.核心:把 實例函數(shù)放在原型對象上歧沪,以實現(xiàn)函數(shù)的復用。同時還要保留借用構造函數(shù)方式的優(yōu)點莲组,通過Super.call(this)诊胞;繼承父類的基本屬性和引用屬性并且能夠保留傳參的優(yōu)點,通過Sun.prototype = new Super();繼承父類函數(shù)锹杈,以實現(xiàn)函數(shù)復用?

優(yōu)缺點:?

優(yōu)點:?

1.不存在引用屬性共享的問題?

2.可傳遞參數(shù)?

3.函數(shù)可復用?

缺點:?

1.子類原型上有一份多余的父類實例屬性撵孤,因為父類構造函數(shù)被調用了兩次,生成了兩份竭望,而子類實例上的那一份屏蔽了子類原型上的(在代碼的注釋部分給予解釋)邪码,內存浪費

四.原型鏈繼承

function Person(){ } Person.prototype.hello = "hello"; Person.prototype.sayHello = function(){ alert(this.hello); }

? function Child(){? }

? Child.prototype = new Person();//這行的作用是:將Parent中將所有通過prototype追加的屬性和方法都追加到Child,從而實現(xiàn)了繼承?

?Child.prototype.world = "world";??

Child.prototype.sayWorld = function(){??

? alert(this.world);

? }?

? var c = new Child();? c.sayHello();? c.sayWorld();

優(yōu)點:簡單咬清,易于實現(xiàn)?

缺點:?

闭专。1.修改sub1.arr之后sub2.arr也發(fā)生了改變,因為來自原型對象的引用屬性是所有實例共享的?

可以這樣理解執(zhí)行過程:?

執(zhí)行sub1.arr.push(2)是先對sub1進行屬性查找旧烧,找遍實例屬性(在這個例子中未定義實例屬性),沒找到就順著原型鏈向上找影钉,找到了sub1的原型對象,發(fā)現(xiàn)arr屬性掘剪,于是在arr末尾插入2,所以sub2.arr也變了?

2.創(chuàng)建子類實例時平委,無法向父類構造函數(shù)傳參數(shù)

五.寄生式繼承

function beget(obj){

? var F = function(){};

? F.prototype = obj;

? return new F();

}

function Super(){

this.val = 1;

this.arr = [1];

}

function getSubObject(obj){

//創(chuàng)建新對象

var clone = beget(obj);//核心

clone.attr1 = 1;

clone.attr2 = 2;

return clone;

}

var sub= getSubObject(new Super());

console.log(sub.val);

console.log(sub.arr);

console.log(sub.arr1);

核心:?

給原型式繼承穿了個馬甲?

注意:beget函數(shù)不是必須的,創(chuàng)建對象-增強-返回該對象夺谁,這樣的過程叫做寄生式繼承廉赔,新的對象是如何創(chuàng)建的不重要?

優(yōu)缺點:?

優(yōu)點:1.不需要創(chuàng)建自定義類型?

缺點:1.無法實現(xiàn)函數(shù)的復用

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市匾鸥,隨后出現(xiàn)的幾起案子蜡塌,更是在濱河造成了極大的恐慌,老刑警劉巖扫腺,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件岗照,死亡現(xiàn)場離奇詭異,居然都是意外死亡笆环,警方通過查閱死者的電腦和手機攒至,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躁劣,“玉大人迫吐,你說我怎么就攤上這事≌送” “怎么了志膀?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵熙宇,是天一觀的道長。 經常有香客問我溉浙,道長烫止,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任戳稽,我火速辦了婚禮馆蠕,結果婚禮上,老公的妹妹穿的比我還像新娘惊奇。我一直安慰自己互躬,他們只是感情好,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布颂郎。 她就那樣靜靜地躺著吼渡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪乓序。 梳的紋絲不亂的頭發(fā)上寺酪,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音竭缝,去河邊找鬼房维。 笑死,一個胖子當著我的面吹牛抬纸,可吹牛的內容都是我干的咙俩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼湿故,長吁一口氣:“原來是場噩夢啊……” “哼阿趁!你這毒婦竟也來了?” 一聲冷哼從身側響起坛猪,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤脖阵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后墅茉,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體命黔,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年就斤,在試婚紗的時候發(fā)現(xiàn)自己被綠了悍募。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡洋机,死狀恐怖坠宴,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情绷旗,我是刑警寧澤喜鼓,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布副砍,位于F島的核電站,受9級特大地震影響庄岖,放射性物質發(fā)生泄漏铣卡。R本人自食惡果不足惜守屉,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一入篮、第九天 我趴在偏房一處隱蔽的房頂上張望垢袱。 院中可真熱鬧,春花似錦硼控、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至疑苫,卻和暖如春熏版,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捍掺。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工撼短, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挺勿。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓曲横,卻偏偏與公主長得像,于是被迫代替她去往敵國和親不瓶。 傳聞我的和親對象是個殘疾皇子禾嫉,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容

  • 在js中, 很多地方需要使用到繼承蚊丐, 廢話少說熙参, 今天來聊一聊js幾種繼承方式的優(yōu)缺點 構造函數(shù)繼承functio...
    superestZe閱讀 290評論 0 0
  • 注意: 1,constructor總是指向類的構造函數(shù) 2麦备,__proto__指向父類的原型對象 1孽椰,原型鏈繼承 ...
    青色琉璃閱讀 127評論 0 0
  • 我的理解:繼承通俗地講就是子代擁有了父代的比如:地位,金錢凛篙,房產等等黍匾。在js中,繼承就是讓一個對象擁有另一個對象的...
    Anna_Hu閱讀 537評論 0 1
  • 我的理解:繼承通俗地講就是子代擁有了父代的比如:地位鞋诗,金錢膀捷,房產等等。在js中削彬,繼承就是讓一個對象擁有另一個對象的...
    sunnyghx閱讀 4,986評論 0 3
  • js 實現(xiàn)繼承的方式有: 原型鏈繼承全庸; 構造函數(shù)繼承秀仲; 組合繼承(原型鏈繼承 + 構造函數(shù)繼承)(最常用);(原型...
    黎貝卡beka閱讀 1,474評論 0 0