摘要：中的繼承上學(xué)過或者之類語言的同學(xué)應(yīng)該會(huì)對(duì)的繼承感到很困惑不要問我怎么知道的的繼承主要是基于原型的對(duì)的原型感興趣的同學(xué)可以了解一下我之前寫的中的原型對(duì)象相信很多同學(xué)也跟我一樣剛開始接觸的面向?qū)ο缶幊痰臅r(shí)候都抱著一種排斥的心態(tài)為什么這么

學(xué)過java或者c#之類語言的同學(xué),應(yīng)該會(huì)對(duì)js的繼承感到很困惑--不要問我怎么知道的,js的繼承主要是基于原型(prototype)的,對(duì)js的原型感興趣的同學(xué),
可以了解一下我之前寫的JS中的原型對(duì)象

相信很多同學(xué)也跟我一樣,剛開始接觸js的面向?qū)ο缶幊痰臅r(shí)候,都抱著一種排斥的心態(tài)--為什么js這么麻煩?
其實(shí)了解完原型鏈后,再來看js的繼承,你會(huì)發(fā)現(xiàn)js的繼承其實(shí)比其他OOP語言更簡(jiǎn)單,更靈活,我們來看一個(gè)基于原型鏈的繼承

// 父類
function Person() {}

// 子類
function Student(){}

// 繼承
Student.prototype = new Person()

我們只要把子類的prototype設(shè)置為父類的實(shí)例,就完成了繼承,怎么樣? 是不是超級(jí)簡(jiǎn)單? 有沒有比Java,C#的清晰?
事實(shí)上,以上就是js里面的原型鏈繼承

當(dāng)然,通過以上代碼,我們的Student只是繼承了一個(gè)空殼的Person,這樣視乎是毫無意義的,我們使用繼承的目的,
就是要通過繼承獲取父類的內(nèi)容,那我們先給父類加上一點(diǎn)點(diǎn)簡(jiǎn)單的內(nèi)容(新增的地方標(biāo)記 "http:// 新增的代碼"):

// 父類
function Person(name,age) {
  this.name = name || "unknow"     // 新增的代碼
  this.age = age || 0              // 新增的代碼
}

// 子類
function Student(name){
  this.name = name                 // 新增的代碼
  this.score = 80                  // 新增的代碼
}

// 繼承
Student.prototype = new Person()

使用

var stu = new Student("lucy")

console.log(stu.name)  // lucy    --子類覆蓋父類的屬性
console.log(stu.age)   // 0       --父類的屬性
console.log(stu.score) // 80      --子類自己的屬性

這里為了降低復(fù)雜度,我們只演示了普通屬性的繼承,沒有演示方法的繼承,事實(shí)上,方法的繼承也很簡(jiǎn)單,
我們?cè)賮砩晕⑿薷囊幌麓a,基于上面的代碼,給父類和子類分別加一個(gè)方法(新增的地方標(biāo)記 "http:// 新增的代碼")

// 父類
function Person(name,age) {
  this.name = name || "unknow"
  this.age = age || 0
}

// 為父類新曾一個(gè)方法
Person.prototype.say = function() {         // 新增的代碼
    console.log("I am a person")
}

// 子類
function Student(name){
  this.name = name
  this.score = 80
}

// 繼承 注意,繼承必須要寫在子類方法定義的前面
Student.prototype = new Person()

// 為子類新增一個(gè)方法(在繼承之后,否則會(huì)被覆蓋)
Student.prototype.study = function () {     // 新增的代碼
    console.log("I am studing")
}

使用

var stu = new Student("lucy")

console.log(stu.name)  // lucy               --子類覆蓋父類的屬性
console.log(stu.age)   // 0                  --父類的屬性
console.log(stu.score) // 80                 --子類自己的屬性
stu.say()              // I am a person      --繼承自父類的方法
stu.study()            // I am studing       --子類自己的方法

這樣,看起來我們好像已經(jīng)完成了一個(gè)完整的繼承了,這個(gè)就是原型鏈繼承,怎么樣,是不是很好理解?
但是,原型鏈繼承有一個(gè)缺點(diǎn),就是屬性如果是引用類型的話,會(huì)共享引用類型,請(qǐng)看以下代碼

// 父類
function Person() {
  this.hobbies = ["music","reading"]
}

// 子類
function Student(){}

// 繼承
Student.prototype = new Person()

使用

var stu1 = new Student()
var stu2 = new Student()

stu1.hobbies.push("basketball")

console.log(stu1.hobbies)   // music,reading,basketball
console.log(stu2.hobbies)   // music,reading,basketball

我們可以看到,當(dāng)我們改變stu1的引用類型的屬性時(shí),stu2對(duì)應(yīng)的屬性,也會(huì)跟著更改,這就是原型鏈繼承缺點(diǎn) --引用屬性會(huì)被所有實(shí)例共享,
那我們?nèi)绾谓鉀Q這個(gè)問題呢? 就是下面我們要提到的借用構(gòu)造函數(shù)繼承,我們來看一下使用構(gòu)造函數(shù)繼承的最簡(jiǎn)單例子:

// 父類
function Person() {
  this.hobbies = ["music","reading"]
}

// 子類
function Student(){
    Person.call(this)              // 新增的代碼
}

使用

var stu1 = new Student()
var stu2 = new Student()

stu1.hobbies.push("basketball")
console.log(stu1.hobbies)   // music,reading,basketball
console.log(stu2.hobbies)   // music,reading

這樣,我們就解決了引用類型被所有實(shí)例共享的問題了

注意,這里跟 原型鏈繼承 有個(gè)比較明顯的區(qū)別是并沒有使用prototype繼承,而是在子類里面執(zhí)行父類的構(gòu)造函數(shù),
相當(dāng)于把父類的代碼復(fù)制到子類里面執(zhí)行一遍,這樣做的另一個(gè)好處就是可以給父類傳參

// 父類
function Person(name) {
  this.name = name              // 新增的代碼
}

// 子類
function Student(name){
    Person.call(this,name)      // 改動(dòng)的代碼
}

使用

var stu1 = new Student("lucy")
var stu2 = new Student("lili")
console.log(stu1.name)   // lucy
console.log(stu2.name)   // lili

看起來已經(jīng)很有Java,C#的味道了有沒有?

但是,構(gòu)造函數(shù)解決了引用類型被所有實(shí)例共享的問題,但正是因?yàn)榻鉀Q了這個(gè)問題,導(dǎo)致一個(gè)很矛盾的問題出現(xiàn)了,--函數(shù)也是引用類型,
也沒辦法共享了.也就是說,每個(gè)實(shí)例里面的函數(shù),雖然功能一樣,但是卻不是同一個(gè)函數(shù),就相當(dāng)于我們每實(shí)例化一個(gè)子類,就復(fù)制了一遍的函數(shù)代碼

// 父類
function Person(name) {
  this.say = function() {}    // 改動(dòng)的代碼
}

// 子類
function Student(name){
    Person.call(this,name)
}

使用

var stu1 = new Student("lucy")
var stu2 = new Student("lili")
console.log(stu1.say === stu2.say)   // false

以上代碼可以證明,父類的函數(shù),在子類的實(shí)例下是不共享的

從上表我們可以看出 原型鏈繼承 和 構(gòu)造函數(shù)繼承 這兩種繼承方式的優(yōu)缺點(diǎn)剛好是互相矛盾的,那么我們有沒有辦法魚和熊掌兼得呢?
沒有的話,我就不會(huì)說出來了,^_^,接下來請(qǐng)?jiān)试S我隆重介紹 組合繼承

組合繼承,就是各取上面2種繼承的長(zhǎng)處,普通屬性 使用 構(gòu)造函數(shù)繼承,函數(shù) 使用 原型鏈繼承,
這個(gè)代碼稍微復(fù)雜一點(diǎn),不過相信有了上面的基礎(chǔ)后,看起來也是很輕松

// 父類
function Person() {
  this.hobbies = ["music","reading"]
}

// 父類函數(shù)
Person.prototype.say = function() {console.log("I am a person")}

// 子類
function Student(){
    Person.call(this)             // 構(gòu)造函數(shù)繼承(繼承屬性)
}
// 繼承
Student.prototype = new Person()  // 原型鏈繼承(繼承方法)

使用

// 實(shí)例化
var stu1 = new Student()
var stu2 = new Student()

stu1.hobbies.push("basketball")
console.log(stu1.hobbies)           // music,reading,basketball
console.log(stu2.hobbies)           // music,reading

console.log(stu1.say == stu2.say)   // true

這樣,我們就既能實(shí)現(xiàn)屬性的獨(dú)立,又能做到函數(shù)的共享,是不是很完美呢?

組合繼承據(jù)說是JavaScript中最常用的繼承方式(具體無法考證哈).

至此,我們就把js里面的常用繼承了解完了,其實(shí)也沒有那么難嘛!不過,我們總結(jié)一下3種繼承

原型鏈繼承,會(huì)共享引用屬性

構(gòu)造函數(shù)繼承,會(huì)獨(dú)享所有屬性,包括引用屬性(重點(diǎn)是函數(shù))

組合繼承,利用原型鏈繼承要共享的屬性,利用構(gòu)造函數(shù)繼承要獨(dú)享的屬性,實(shí)現(xiàn)相對(duì)完美的繼承

上面為什么要說相對(duì)完美呢? 因?yàn)楸疚牡臉?biāo)題叫【JS中的繼承(上)】,那肯定是還有
【JS中的繼承(下)】.md)咯，
目前為止,我們只講了3種最基本的繼承,事實(shí)上,JavaScript還有好多繼承方式,為了讓你不至于學(xué)習(xí)疲勞，所以我打算分開來講，
如果你沒有那個(gè)耐性繼續(xù)看下去，那么看完這篇對(duì)于理解JavaScript的繼承，也是夠用的。但是建議多看兩遍，加深印象，
我學(xué)js繼承的時(shí)候，那本犀牛書都被我翻爛了，寫這篇文字的時(shí)候，我還在一遍翻一邊寫的呢(噓！)

好了，今天就到這里，感謝收看，如果覺得對(duì)您有用，請(qǐng)給本文的github加個(gè)star,萬分感謝，
另外，github上還有其他一些關(guān)于前端的教程和組件，有興趣的童鞋可以看看，你們的支持就是我最大的動(dòng)力。