唉栓辜。又是繼承箱熬。。
雖然之前花大時間寫了半天ES5的繼承约谈,但最近準(zhǔn)備面試題的時候碗啄,突然發(fā)現(xiàn)质和,ES5的繼承只是偽面向?qū)ο蟮膶懛ǎ珽S6有提供更加強(qiáng)大的繼承模式稚字。本著一顆求知若渴的心(其實(shí)是害怕面試死在這個問題上)饲宿,今天詳細(xì)學(xué)習(xí)一下ES6的繼承語法厦酬。寫之前先上一下ES5的繼承方式(這里復(fù)制粘貼我之前寫的):
ES5繼承
所謂繼承,就是兒子能用爸爸的方法和屬性瘫想。繼承不僅體現(xiàn)在類與實(shí)例的關(guān)系中仗阅,類與類之間也能通過面向?qū)ο蟮姆椒▉韺?shí)現(xiàn)繼承(這里不談及原型式和寄生式)
1.原型鏈繼承
思路:將兒子的原型對象設(shè)置為爸爸的一個實(shí)例。
步驟:
1.定義父類型構(gòu)造函數(shù)
2.定義子類型構(gòu)造函數(shù)
3.給父類型構(gòu)造函數(shù)原型添加方法
4.將父類型構(gòu)造函數(shù)賦(new)給子類型原型對象
5.修正子類型原型對象指針
6.給子類型原型添加方法??? //這里已經(jīng)結(jié)束国夜,是為了做對比才添加方法
7.調(diào)用方法做對比測試
缺點(diǎn):
原型鏈繼承多個實(shí)例的引用類型屬性指向相同,一個實(shí)例修改了原型屬性支竹,另一個實(shí)例的原型屬性也會被修改
不能傳遞參數(shù)
繼承單一
2.構(gòu)造函數(shù)繼承
思路:使用call旋廷,bind鸠按,apply等方法來將父類型方法引入
步驟:
1.定義父類型構(gòu)造函數(shù)
2.定義子類型構(gòu)造函數(shù)
3.在父類型構(gòu)造函數(shù)中添加方法(注意這里不是在原型中添加)
4.在子類型函數(shù)中用call(或另兩種)方法礼搁,將父類型方法引入
5.在子類型構(gòu)造函數(shù)原型中添加方法??? //這里也結(jié)束了,做對比
6.調(diào)用方法做對比測試
缺點(diǎn):
只能繼承父類的實(shí)例屬性和方法目尖,不能繼承原型屬性和方法
無法實(shí)現(xiàn)構(gòu)造函數(shù)的復(fù)用馒吴,每個子類都有父類實(shí)例函數(shù)的副本,影響性能瑟曲,代碼會臃腫
另外關(guān)于無法實(shí)現(xiàn)構(gòu)造函數(shù)的復(fù)用這一點(diǎn)饮戳,我摘抄了知乎大佬的一段解答,放到下面:
先說結(jié)論: 繼承的本質(zhì)都是為了復(fù)用洞拨。但此復(fù)用非彼復(fù)用扯罐。舉個例子:
functionPeople(name,age){this.name=namethis.age=agethis.sayHi=function(){console.log('hi')}}
const people1=newPeople('Jack',10)
const people2=newPeople('Lucy',8)
people1.sayHi===people2.sayHi// false
上述 demo 中 people1 和 people2 使用了借用構(gòu)造函數(shù)后都有了調(diào)用 sayHi 函數(shù)的能力(復(fù)用), 但是 people1 上的 sayHi 和 people2 上 sayHi 本質(zhì)是兩個不相等的函數(shù), 所以出現(xiàn)了所謂的沒有復(fù)用。
更為詳細(xì)的可以看我之前寫的博客歹河。
作者:牧云云
鏈接:https://www.zhihu.com/question/395428095/answer/1230121735
來源:知乎
3.組合繼承? 果然最無敵的還是合體技呢。花吟。
思路:既然各有各的好,那就要有我們辯證唯物主義的思維衅澈,摒棄腐敗的键菱,延用優(yōu)秀的
步驟:
1.定義父類型構(gòu)造函數(shù)
2.定義子類型構(gòu)造函數(shù)
3.給父類型構(gòu)造函數(shù)原型添加方法
4.在子類型函數(shù)中用call(或另兩種)方法今布,將父類型屬性引入
5.將父類型構(gòu)造函數(shù)賦(new)給子類型原型對象
6.修正子類型原型對象指針
7.在子類型構(gòu)造函數(shù)原型中添加方法??? //做對比
ES6繼承
在ES6中,我們有了語法糖部默,引入了class類的概念,而在class中甩牺,有一個默認(rèn)的屬性方法:constructor。該方法是類的構(gòu)造函數(shù),在我們通過new創(chuàng)造該類的實(shí)例時急但,會自動調(diào)用該方法。
以上是比較難懂的定義波桩,我們萌新就只需要了解戒努,我們以前在構(gòu)造函數(shù)中定義的屬性镐躲,通通寫進(jìn)這里面就完事了储玫。舉個例子:
這里應(yīng)該也比較清楚了撒穷,和ES5中其實(shí)并沒有太多區(qū)別,但更加簡潔了裆熙。然后我們在其中添加方法:
好了端礼,我們目前在Person中已經(jīng)添加了方法與屬性,接下來介紹ES6的繼承方法:
extends關(guān)鍵字入录、super()
extends表示繼承父類蛤奥,super()則表示父類構(gòu)造函數(shù),寫法繼續(xù)上面的寫:
那么這里應(yīng)該很清楚了僚稿,相比起ES5中麻煩的this指向以及constructor指向的改動凡桥,這里直接使用extends和super()就能夠解決