繼承可以使得子類別具有父類的各種方法和屬性
繼承方法：
一、原型鏈繼承
原型鏈繼承是比較常見(jiàn)的繼承方式之一其中涉及的構(gòu)造函數(shù)、原型和實(shí)例
三者之間存在著一定的關(guān)系：
- 每一個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象
- 原型對(duì)象又包含一個(gè)指向構(gòu)造函數(shù)的指針
- 而實(shí)例則包含一個(gè)原型對(duì)象的指針
function Parent1() {
this.name = 'parent1'
this.play = [1, 2, 3]
}
function Child1() {
this.type = 'child1'
}
Child1.prototype = new Parent1()
console.log(new Child1())
上面代碼看似沒(méi)有問(wèn)題，雖然父類的方法和屬性都能夠訪問(wèn),但其實(shí)有一個(gè)潛在的問(wèn)題，下面例子來(lái)說(shuō)明這個(gè)問(wèn)題
var s1 = new Child1()
var s2 = new Child1()
s1.play.push(4)
console.log(s1.play, s2.play)
// [1,2,3,4],[1,2,3,4]
上面代碼明明只改變了s1的play屬性，為啥s2的屬性也跟著改變了，原因很簡(jiǎn)單，因?yàn)閮蓚€(gè)實(shí)例使用的是同一個(gè)原型對(duì)象，他們的內(nèi)存空間是共享的，當(dāng)一個(gè)發(fā)生變化的時(shí)候，另外一個(gè)也隨之進(jìn)行變化 。這就是使用原型鏈繼承方式的缺點(diǎn)
二、構(gòu)造函數(shù)繼承（借助call）
構(gòu)造函數(shù)的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：它使父類引用屬性不會(huì)被共享，優(yōu)化了第一種繼承方式的弊端。
缺點(diǎn)：只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性和方法
function Parent2() {
this.name = 'parent2'
}
Parent2.prototype.getName = function() {
return this.name
}
function Child1() {
Parent2.call(this)
this.type = 'child2'
}
let child = new Child1()
console.log(child) // Child1 {name: "parent2", type: "child2"}
console.log(child.getName()) // child.getName is not a function
三、組合繼承（前兩種組合）
function Parent3() {
this.name = 'parent3'
this.play = [1, 2, 3]
}
Parent3.prototype.getName = function() {
return this.name
}
function Child3() {
// 第二次調(diào)用 Parent3()
Parent3.call(this)
this.type = 'child3'
}
// 第一次調(diào)用 Parent3()
Child3.prototype = new Parent3()
// 手動(dòng)掛上構(gòu)造器，指向自己的構(gòu)造函數(shù)
Child3.prototype.constructor = Child3
var s3 = new Child3()
var s4 = new Child3()
s3.play.push(4)
console.log(s3.play, s4.play) //[1, 2, 3, 4] , [1, 2, 3]
console.log(s3.getName()) //parent3
console.log(s4.getName()) //parent3
上面代碼解決了前兩種方法的問(wèn)題，又有了新的問(wèn)題，通過(guò)上面的注釋，我們可以看到Parent3被調(diào)用了兩次，第一次是改變Child3的prototype的時(shí)候，第二次通過(guò)call調(diào)用Parent3的時(shí)候，那么Parent3多構(gòu)造一次就多進(jìn)行了一次性能開(kāi)銷。
四、原型式繼承 （Object.create()）
該方法接收兩個(gè)參數(shù)：
1、用作新對(duì)象原型的對(duì)象
2、為新對(duì)象定義額外屬性的對(duì)象（可選參數(shù)）
let parent4 = {
name: 'parent4',
friends: ['p1', 'p2', 'p3'],
getName: function() {
return this.name
}
}
let person4 = Object.create(parent4)
person4.name = 'tom'
person4.friends.push('jerry')
let person5 = Object.create(parent4)
person5.friends.push('lucy')
console.log(person4.name) // tom
console.log(person4.name === person4.getName()) // true
console.log(person5.name) // parent4
console.log(person4.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
console.log(person5.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
上面代碼通過(guò)Object.create()方法可以實(shí)現(xiàn)普通對(duì)象的繼承，不僅能繼承屬性，同樣也能繼承getName()方法
五、寄生式繼承
使用原型式繼承可以獲得一份目標(biāo)對(duì)象的淺拷貝，然后利用這個(gè)淺拷貝的能力再進(jìn)行增強(qiáng)，添加一些方法，這樣的繼承方式 ，稱為寄生式繼承。
雖然優(yōu)缺點(diǎn)和原型式繼承一樣，但對(duì)于普通對(duì)象的繼承方式來(lái)說(shuō)，寄生式繼承相比于原型式繼承還是在父類基礎(chǔ)上添加了更多的方法。
let parent5 = {
name: 'parent5',
friends: ['p1', 'p2', 'p3'],
getName: function() {
return this.name
}
}
function clone(original) {
let clone = Object.create(original)
clone.getFriends = function() {
return this.friends
}
return clone
}
let person5 = clone(parent5)
console.log(person5.getName()) // parent5
console.log(person5.getFriends()) // ["p1", "p2", "p3"]
通過(guò)上面代碼，我們可以看到person5是通過(guò)寄生式繼承生成的實(shí)例，它不僅僅有getName方法,而且最后也用了getFriends方法，從最后輸出的結(jié)果中可以看到person5通過(guò)clone方法添加了getFriends方法,從而使person5這個(gè)普通對(duì)象在繼承過(guò)程中又增加了一個(gè)方法，這樣的繼承方式就是寄生式繼承。
六、寄生組合式繼承
在前面這幾種繼承方式的優(yōu)缺點(diǎn)基礎(chǔ)上進(jìn)行改造，得出了寄生組合式的繼承方式，這也是所有繼承方式里面相對(duì)最優(yōu)的繼承方式。
function clone(parent, child) {
// 這里改用Object.create就可以減少組合繼承中多進(jìn)行一次構(gòu)造的過(guò)程
child.prototype = Object.create(parent.prototype)
child.prototype.constructor = child
}
function Parent6() {
this.name = 'parent6'
this.play = [1, 2, 3]
}
Parent6.prototype.getName = function() {
return this.name
}
function Child6() {
Parent6.call(this)
this.friends = 'child6'
}
clone(Parent6, Child6)
Child6.prototype.getFriends = function() {
return this.friends
}
let person6 = new Child6()
console.log(person6) // Child6 {name: "parent6", play: Array(3), friends: "child6"}
console.log(person6.getName()) // parent6
console.log(person6.getFriends()) // child6
總結(jié)
