JS繼承(不同方式和優(yōu)缺點(diǎn))

以下代碼可以直接放到控制臺(tái)看運(yùn)行結(jié)果
1袍榆、借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承沦泌,缺點(diǎn)是不能繼承Parent1的原型對(duì)象

// 借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承
function Parent1() {
    this.name = 'parent1';
    this.play = [1, 2, 3];
}

function Child1() {
    Parent1.call(this); //apply
    this.type = 'Child1';
}

console.log(new Parent1(), new Child1());
var s1 = new Child1();
var s2 = new Child1();
console.log(s1, s2);//未繼承原型對(duì)象
console.log(s1.play, s2.play);
s1.play.push(4);
console.log(s1.play, s2.play);

Parent1.prototype.age = 20;
console.log(s1.age, s2.age);

2、借助原型鏈實(shí)現(xiàn)繼承费奸,缺點(diǎn)是共享屬性和方法

//借助原型鏈實(shí)現(xiàn)繼承
function Parent2() {
    this.name = 'parent2';
    this.play = [1, 2, 3];
}

function Child2() {
    this.type = 'Child2';
}
Child2.prototype = new Parent2();

var s3 = new Child2();
var s4 = new Child2();
console.log(s3, s4);
console.log(s3.play, s4.play);
s3.play.push(4);
console.log(s3.play, s4.play);//s3和s4的屬性和方法共享

3弥激、組合方式實(shí)現(xiàn)繼承(原型鏈繼承+綁定this),缺點(diǎn)是Parent3執(zhí)行兩次

// 組合方式
function Parent3() {
    this.name = 'parent3';
    this.play = [1, 2, 3];
}

function Child3() {
    Parent3.call(this);
    this.type = 'Child3';
}
Child3.prototype = new Parent3();

var s5 = new Child3();
var s6 = new Child3();
console.log(s5, s6);//繼承了parent3的原型對(duì)象
console.log(s5.play, s6.play);
s5.play.push(4);
console.log(s5.play, s6.play);//s5和s6數(shù)據(jù)對(duì)象不同

4愿阐、組合方式實(shí)現(xiàn)繼承優(yōu)化一微服,缺點(diǎn)是無(wú)法區(qū)分實(shí)例是由父類(lèi)創(chuàng)造還是子類(lèi)創(chuàng)造

//組合方式優(yōu)化一
function Parent4() {
    this.name = 'parent4';
    this.play = [1, 2, 3];
}

function Child4() {
    Parent4.call(this);
    this.type = 'Child4';
}
Child4.prototype = Parent4.prototype; //不用實(shí)例化一個(gè)Parent4對(duì)象

var s7 = new Child4();
var s8 = new Child4();
console.log(s7.play, s8.play);
s7.play.push(4);
console.log(s7.play, s8.play);
console.log(s7.constructor); //缺點(diǎn)是Child4和Parent4的原型對(duì)象相同,構(gòu)造函數(shù)相同
// console.log(Child4.prototype.constructor);
// console.log(s5.__proto__.constructor);
// console.log(s5.__proto__ === Child4.prototype);

5缨历、組合方式實(shí)現(xiàn)繼承優(yōu)化二(最優(yōu)寫(xiě)法)

// 組合繼承的優(yōu)化2(完美寫(xiě)法)
function Parent5() {
    this.name = 'parent5';
    this.play = [1, 2, 3];
}

function Child5() {
    Parent5.call(this); 
    this.type = 'Child5';
}
Child5.prototype = Object.create(Parent5.prototype); //Child5原型對(duì)象是Obejct.create方法的參數(shù)
//Object.create方法會(huì)丟失原構(gòu)造函數(shù)屬性
//它的原型鏈也是原構(gòu)造函數(shù)(對(duì)象)本身以蕴,因此還需要指定constructor
Child5.prototype.constructor = Child5;

var s9 = new Child5();
var s10 = new Child5();
s9.play.push(4);
console.log(s9.play, s10.play);
console.log(s9.constructor);
console.log(s9.__proto__ === Child5.prototype);

Parent5.prototype.age = 20;
console.log(s9.age, s10.age);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市辛孵,隨后出現(xiàn)的幾起案子丛肮,更是在濱河造成了極大的恐慌,老刑警劉巖觉吭,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腾供,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)伴鳖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)节值,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人榜聂,你說(shuō)我怎么就攤上這事搞疗。” “怎么了须肆?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵匿乃,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我豌汇,道長(zhǎng)幢炸,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任拒贱,我火速辦了婚禮宛徊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘逻澳。我一直安慰自己闸天,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布斜做。 她就那樣靜靜地躺著苞氮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瓤逼。 梳的紋絲不亂的頭發(fā)上笼吟,一...
    開(kāi)封第一講書(shū)人閱讀 52,457評(píng)論 1 311
  • 那天,我揣著相機(jī)與錄音抛姑,去河邊找鬼赞厕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛定硝,可吹牛的內(nèi)容都是我干的皿桑。 我是一名探鬼主播,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蔬啡,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼诲侮!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起箱蟆,我...
    開(kāi)封第一講書(shū)人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤沟绪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后空猜,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體绽慈,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡恨旱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了坝疼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搜贤。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖钝凶,靈堂內(nèi)的尸體忽然破棺而出仪芒,到底是詐尸還是另有隱情,我是刑警寧澤耕陷,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布掂名,位于F島的核電站,受9級(jí)特大地震影響哟沫,放射性物質(zhì)發(fā)生泄漏饺蔑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一南用、第九天 我趴在偏房一處隱蔽的房頂上張望膀钠。 院中可真熱鬧掏湾,春花似錦裹虫、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至尊浪,卻和暖如春匣屡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拇涤。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工捣作, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鹅士。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓券躁,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親掉盅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子也拜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360