03.js中的繼承

# 概述

本文主要記錄js中實(shí)現(xiàn)繼承的幾種方法的實(shí)現(xiàn),優(yōu)缺點(diǎn)分析

# 知識(shí)鋪墊

+ **構(gòu)造函數(shù),原型和實(shí)例的關(guān)系:**

+ 每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象--prototype

+ 每個(gè)原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針--constructor

+ 每個(gè)實(shí)例對(duì)象都有一個(gè)指向原型對(duì)象的指針

+ 構(gòu)造函數(shù)可以new實(shí)例對(duì)象

>**圖解三者關(guān)系**

![FvvO2t.png](https://s2.ax1x.com/2019/01/13/FvvO2t.png)

---

# 原型繼承

+ **核心思想:**

> 將父類的實(shí)例直接賦值給子類的原型對(duì)象prototype

+ **本質(zhì)**

>重寫了子類的原型對(duì)象邑退,原本存在父類的屬性和方法也存在于子類的prototype中了

+ **代碼演示**

```

//父類

function Person() {

? ? this.name = 'Tom'

? ? this.age = 18

}

//子類

function Student() {

? ? this.score = 100

}

//父類的實(shí)例賦值給子類的原型對(duì)象

Student.prototype = new Person()

Student.prototype.constructor = Student

let student1 = new Student();

console.log(student1.name,student1.age,student1.score)

console.dir(Student)

```

+ **打印結(jié)果:**

![FxpNZT.png](https://s2.ax1x.com/2019/01/13/FxpNZT.png)

+ **打印結(jié)果解析**

+ 首先,我們將Person的實(shí)例賦值給Student.prototype,這樣在Student.prototype中就存在了Person中的屬性和方法

+ 其次救斑,如果我們不添加黃色方框中的代碼换淆,那么Student.prototype中的constructor指向的就是Person

當(dāng)添加了黃色方框中的代碼后哗总,Student.prototype中的constructor又重新指向了Student

+ **原型繼承存在的問題**

+ 通過原型實(shí)現(xiàn)繼承時(shí)几颜,原型會(huì)變成另一個(gè)類型的實(shí)例,所以**要通過黃色方框繼承后將原型的構(gòu)造函數(shù)重新指向原來的構(gòu)造函數(shù)**

+ 使用原型繼承時(shí)讯屈,**不能向父類的構(gòu)造函數(shù)傳參**

---

# 借用構(gòu)造函數(shù)(解決傳參問題)

+ **核心思想**

> 使用call()方法改變this指向蛋哭,實(shí)現(xiàn)**屬性**繼承

+ **本質(zhì)**

> 在子類的構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)并使用call()使this指向子類實(shí)例

+ **代碼實(shí)現(xiàn)**

```

function Person(name,age) {

? ? this.name = name

? ? this.age = age

? ? this.play = function () {

? ? ? ? console.log(this.name + '玩游戲')

? ? }

}

Person.prototype.test = function () {

? ? console.log(this.name + '參加考試')

}

function Student(name,age,score) {

? ? Person.call(this,name,age)

? ? this.score = score

}

let student1 = new Student('Tom',18,100)

let student2 = new Student('Jerry',18,96)

console.dir(student1)

console.dir(student2)

student1.play()

student1.test()

```

+ **打印結(jié)果**

![Fxl9wF.png](https://s2.ax1x.com/2019/01/14/Fxl9wF.png)

+ **打印結(jié)果解析**

> + ***序號(hào)1***處,在子類的構(gòu)造函數(shù)中使用了call()方法涮母,繼承了父類的屬性和**定義在構(gòu)造函數(shù)中的成員方法(不能繼承定義在原型上的方法)**

> + ***序號(hào)2***處具壮,因?yàn)槭褂玫臉?gòu)造函數(shù)的形式,為了避免方法的重復(fù)定義哈蝇,所以將方法定義在原型上棺妓,但這樣不能繼承,要想繼承炮赦,就定義在構(gòu)造函數(shù)內(nèi)部

+ **存在的問題**

+ 借用構(gòu)造函數(shù)雖然解決了傳參問題怜跑,但是還是解決不了函數(shù)的重復(fù)定義問題

---

# 組合繼承

+ **核心思想**

> 組合就是原型繼承(繼承方法)+借用構(gòu)造函數(shù)(繼承屬性)的組合

+ **本質(zhì)**

> + 把父類的方法定義在原型上,通過原型繼承吠勘,讓子類原型中擁有父類的成員方法

> + 把屬性定義在構(gòu)造函數(shù)中性芬,子類通過call()方法繼承父類屬性

+ **代碼演示**

```

function Person(name,age) {

? ? this.name = name

? ? this.age = age

}

Person.prototype.play = function () {

? ? console.log(this.name + '在玩游戲')

}

function Student(name,age,score) {

? ? Person.call(this,name,age)

? ? this.score = score

}

Student.prototype = new Person()

Student.prototype.constructor = Student

let student1 = new Student('Tom',18,100)

console.log(student1)

student1.play()

let student2 = new Student('Jerry',10,60)

console.log(student2)

student2.play()

```

+ **打印結(jié)果**

![Fx3RJJ.png](https://s2.ax1x.com/2019/01/14/Fx3RJJ.png)

+ **打印結(jié)果解析**

> + ***序號(hào)1***處使用借助構(gòu)造函數(shù)的形式實(shí)現(xiàn)屬性繼承

> + ***序號(hào)2***處采用原型繼承的方式,繼承了定義在原型方法上的成員方法(**使用原型繼承后剧防,記得將子類的原型中的構(gòu)造函數(shù)指針重新指會(huì)子類的構(gòu)造函數(shù)**)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末植锉,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子峭拘,更是在濱河造成了極大的恐慌俊庇,老刑警劉巖鸡挠,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異姓惑,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)望众,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門蚤氏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事∏憬耍” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長最欠。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么皮官? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任剪撬,我火速辦了婚禮馍佑,結(jié)果婚禮上拭荤,老公的妹妹穿的比我還像新娘旦委。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布翎碑。 她就那樣靜靜地躺著遣铝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天涝滴,我揣著相機(jī)與錄音胶台,去河邊找鬼。 笑死杂抽,一個(gè)胖子當(dāng)著我的面吹牛诈唬,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播默怨,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼讯榕,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼骤素!你這毒婦竟也來了匙睹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤济竹,失蹤者是張志新(化名)和其女友劉穎痕檬,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體送浊,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梦谜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了袭景。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唁桩。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖耸棒,靈堂內(nèi)的尸體忽然破棺而出荒澡,到底是詐尸還是另有隱情,我是刑警寧澤与殃,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布单山,位于F島的核電站,受9級(jí)特大地震影響幅疼,放射性物質(zhì)發(fā)生泄漏米奸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一爽篷、第九天 我趴在偏房一處隱蔽的房頂上張望悴晰。 院中可真熱鬧,春花似錦逐工、人聲如沸膨疏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽佃却。三九已至,卻和暖如春窘俺,著一層夾襖步出監(jiān)牢的瞬間饲帅,已是汗流浹背复凳。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留灶泵,地道東北人育八。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓判呕,卻偏偏與公主長得像钮热,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子辈挂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

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