class繼承

1.class可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承,比es5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承,要清晰和方便谭羔。

子類必須在constructor方法中調(diào)用super方法,否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)

對(duì)比:
ES5 的繼承麦向,實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對(duì)象this瘟裸,然后再將父類的方法添加到this上面(Parent.apply(this))。ES6 的繼承機(jī)制完全不同诵竭,實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對(duì)象this(所以必須先調(diào)用super方法)话告,然后再用子類的構(gòu)造函數(shù)修改this

在子類的構(gòu)造函數(shù)中,只有調(diào)用super之后卵慰,才可以使用this關(guān)鍵字沙郭,否則會(huì)報(bào)錯(cuò)

2.Object.getPrototypeOf()方法可以用來(lái)從子類上獲取父類。

     Object.getPrototypeOf(ColorPoint) === Point// true

可以使用這個(gè)方法判斷裳朋,一個(gè)類是否繼承了另一個(gè)類病线。

3.super關(guān)鍵字
super既可以當(dāng)做函數(shù)使用,也可以當(dāng)做對(duì)象使用鲤嫡。
1>作為函數(shù)調(diào)用時(shí)送挑,代表父類的構(gòu)造函數(shù)。(Es6要求:子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)暖眼。)

        class A{}
        class B extends  A {
              constructor(){
                  super();
              }
        }

子類B的構(gòu)造函數(shù)之中的super()惕耕,代表調(diào)用父類的構(gòu)造函數(shù)

注意,super雖然代表了父類A的構(gòu)造函數(shù)诫肠,但是返回的是子類B的實(shí)例司澎,即super內(nèi)部的this指的是B,因此super()在這里相當(dāng)于A.prototype.constructor.call(this)

        class A {
            constructor() {
                  console.log(new.target.name);
            }
         }
         class B extends A {
            constructor() {
               super();
            }
         }

        new A() // A
        new B() // B

new.target指向當(dāng)前正在執(zhí)行的函數(shù)

super()內(nèi)部的this指向的是B

當(dāng)作為函數(shù)時(shí)栋豫,super()只能用在子類的構(gòu)造函數(shù)之中惭缰,用在其他地方就會(huì)報(bào)錯(cuò)
2>第二種情況,super作為對(duì)象時(shí)笼才,在普通方法中漱受,指向父類的原型對(duì)象;在靜態(tài)方法中,指向父類昂羡。
屬性定義在父類的原型對(duì)象上絮记,super就可以取到

ES6 規(guī)定,通過(guò)super調(diào)用父類的方法時(shí)虐先,super會(huì)綁定子類的this

使用super的時(shí)候怨愤,必須顯式指定是作為函數(shù)、還是作為對(duì)象使用蛹批,否則會(huì)報(bào)錯(cuò)

4.類的 prototype 屬性和proto屬性

大多數(shù)瀏覽器的 ES5 實(shí)現(xiàn)之中撰洗,每一個(gè)對(duì)象都有proto屬性,指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性腐芍。Class 作為構(gòu)造函數(shù)的語(yǔ)法糖差导,同時(shí)有prototype屬性和proto屬性,因此同時(shí)存在兩條繼承鏈猪勇。

(1)子類的proto屬性设褐,表示構(gòu)造函數(shù)的繼承,總是指向父類泣刹。

(2)子類prototype屬性的proto屬性助析,表示方法的繼承,總是指向父類的prototype屬性椅您。

extends 的繼承目標(biāo)

extends關(guān)鍵字后面可以跟多種類型的值外冀。

extends 的繼承目標(biāo)
extends關(guān)鍵字后面可以跟多種類型的值。

  class B extends A {
   }

代碼的A掀泳,只要是一個(gè)有prototype屬性的函數(shù)锥惋,就能被B繼承。由于函數(shù)都有prototype屬性(除了Function.prototype函數(shù))开伏,因此A可以是任意函數(shù)

三種特殊情況:
1>子類繼承Object類
2>不存在任何繼承
3>子類繼承null

實(shí)例的 proto 屬性
子類實(shí)例的proto屬性的proto屬性膀跌,指向父類實(shí)例的proto屬性。也就是說(shuō)固灵,子類的原型的原型捅伤,是父類的原型

5.原生構(gòu)造函數(shù)的繼承
原生構(gòu)造函數(shù)是指語(yǔ)言內(nèi)置的構(gòu)造函數(shù),通常用來(lái)生成數(shù)據(jù)結(jié)構(gòu)巫玻。ECMAScript 的原生構(gòu)造函數(shù)大致有下面這些丛忆。

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
以前,這些原生構(gòu)造函數(shù)是無(wú)法繼承的仍秤,比如熄诡,不能自己定義一個(gè)Array的子類

6.Mixin 模式的實(shí)現(xiàn)
Mixin 模式指的是,將多個(gè)類的接口“混入”(mix in)另一個(gè)類

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末诗力,一起剝皮案震驚了整個(gè)濱河市凰浮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖袜茧,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件菜拓,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡笛厦,警方通過(guò)查閱死者的電腦和手機(jī)纳鼎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)裳凸,“玉大人贱鄙,你說(shuō)我怎么就攤上這事∫坦龋” “怎么了逗宁?”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)菠秒。 經(jīng)常有香客問(wèn)我疙剑,道長(zhǎng)氯迂,這世上最難降的妖魔是什么践叠? 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮嚼蚀,結(jié)果婚禮上禁灼,老公的妹妹穿的比我還像新娘。我一直安慰自己轿曙,他們只是感情好弄捕,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著导帝,像睡著了一般守谓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上您单,一...
    開封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天斋荞,我揣著相機(jī)與錄音,去河邊找鬼虐秦。 笑死平酿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的悦陋。 我是一名探鬼主播蜈彼,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼俺驶!你這毒婦竟也來(lái)了幸逆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎秉颗,沒(méi)想到半個(gè)月后痢毒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蚕甥,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年哪替,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片菇怀。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凭舶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出爱沟,到底是詐尸還是另有隱情帅霜,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布呼伸,位于F島的核電站身冀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏括享。R本人自食惡果不足惜搂根,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铃辖。 院中可真熱鬧剩愧,春花似錦、人聲如沸娇斩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)犬第。三九已至锦积,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間歉嗓,已是汗流浹背丰介。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留遥椿,地道東北人基矮。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像冠场,于是被迫代替她去往敵國(guó)和親家浇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

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

  • 1.構(gòu)造函數(shù)碴裙,原型钢悲,實(shí)例之間的關(guān)系 每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象(prototype屬性)点额,原型對(duì)象都包含一個(gè)指向...
    秦小婕閱讀 852評(píng)論 0 0
  • class的基本用法 概述 JavaScript語(yǔ)言的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù),定義并生成新對(duì)象莺琳。下面是一個(gè)例子: ...
    呼呼哥閱讀 4,070評(píng)論 3 11
  • JS是一種基于對(duì)象的語(yǔ)言还棱,要實(shí)現(xiàn)面向?qū)ο螅瑢懛ǜ鷤鹘y(tǒng)的面向?qū)ο笥泻艽蟮牟町惒训取S6引入了Class語(yǔ)法糖珍手,使得JS...
    開始懂了_317閱讀 6,868評(píng)論 0 4
  • 基本概念 Class 實(shí)現(xiàn)繼承主要依賴extends、super辞做、static琳要。 1.extends關(guān)鍵字: 上面...
    yu580閱讀 176評(píng)論 0 0
  • 這不是一首詩(shī) 是一本書 智慧的可愛(ài) 透著溫暖的慈悲 長(zhǎng)輩的大手 有力的保護(hù)著孩子 我想用狡猾來(lái)贊美 沒(méi)有不敬 這是...
    念今塵閱讀 490評(píng)論 4 50