再和“面向?qū)ο蟆闭剳賽?- super(六)

上一篇文章里介紹了繼承监透,那其中說過一個很關(guān)鍵的東西想要繼承子類里里必需先調(diào)用一個super方法犀概。而super的作用絕對是價值連城!同時super的作用還有多種煮仇,并且跟你的使用環(huán)境有關(guān)系嫉髓。

1观腊、當(dāng)作函數(shù)使用

super被當(dāng)作函數(shù)使用,這種情況是最普遍的算行,上一篇文章里已經(jīng)使用過梧油。它有以下幾種作用:

  1. super作為函數(shù)調(diào)用時,代表父類的構(gòu)造函數(shù)
  2. 調(diào)用super后州邢,this會被改成子類
  3. 只能用在構(gòu)造函數(shù)里儡陨,用在其它地方報錯
{
    class Father{
        constructor(){
            console.log(new.target.name);
        }
    }
    class Son extends Father{
        constructor(){
            super();
            this.a=10;  //這里的this指向,Son的實例
        }
        method(){
            //super()   報錯,只能用在constructor里
        }
    }
    new Father();   //Father(new.target返回Father類)
    new Son();      //Son(new.target返回Son子類)
    console.log(new Son().a);   //10 this指向被修改成了子類的實例
}

子類里面并沒有寫console.log迄委,但是發(fā)現(xiàn)生成子類實例后褐筛,控制臺里有輸出类少。說明:super其實相當(dāng)于執(zhí)行了父級的constructor方法叙身。同時彈出的結(jié)果是指向了子類,又說明雖然調(diào)用的是父類的構(gòu)造函數(shù)硫狞,但是調(diào)用完后會指向子類信轿,this指向也被改成了子類的實例。其實supe的作用相當(dāng)于執(zhí)行Father.prototype.constructor.call(this);

2残吩、當(dāng)作對象使用

super也可以被當(dāng)作對象使用财忽,被當(dāng)作對象使用的時候情況有些復(fù)雜,跟上面是完全不一樣的泣侮,同時又按使用環(huán)境分為了兩種情況即彪。

  1. 在普通方法中,指向父類的原型對象
* 只能調(diào)用原型里的東西
* 如果調(diào)用的是方法活尊,那方法內(nèi)部this指向子類實例
* 如果用super去添加屬性的話隶校,super就是this(實例)
  1. 在私有方法中,指向父類蛹锰,而不是父類的原型
* 如果調(diào)用的是方法深胳,那方法內(nèi)部this指向子類而不是子類實例

在普通方法中使用

此時切記用super去獲取跟設(shè)置時的指向完全不一樣

{
    class Father{
        constructor(){
            this.a='父類實例的a';
            this.b='父類實例的b';
        }
        showB(){
            console.log(`這是父類身上的共享方法,并且會彈出${this.b}`);
        }
        static showB(){ //私有方法可以與上面的方法重名
            console.log(`這是父類身上的私有方法,并且會彈出${this.b}`);
        }
    }
    Father.prototype.a='父類原型的a';   //在原型身上的添加一個屬性a
    
    class Son extends Father{
        constructor(){
            super();    //這里的super是個方法,作用為引入父類的構(gòu)造函數(shù)(當(dāng)作函數(shù)使用)
            this.b='子類實例的b';
            
            //此處聲明:請按注釋標(biāo)的序號順序執(zhí)行代碼
            
            //
            /*
             *  3铜犬、super設(shè)置屬性
             *      1舞终、用super設(shè)置屬性的話,super就代表當(dāng)前環(huán)境的this癣猾。而當(dāng)前環(huán)境為子類的constructor敛劝,所以此時的super代表的就是子類的實例對象
             *      2、此時下面的showB()方法彈出的內(nèi)容為"這是父類身上的共享方法,并且會彈出super就是this"是因為纷宇,如果super為this的話攘蔽,那就與上面那段代碼重復(fù)了,后面覆蓋前面
             *
             */
            super.b='super就是this';
            
            
            /*
             *  4呐粘、super獲取屬性
             *      1满俗、此時super的作用是獲取屬性,它依然指向父類的原型對象所以下面這句話相當(dāng)于console.log(Father.prototype.b);所以結(jié)果為undefined作岖。雖然在上面定義了super.b那也不會改變super的指向
             */
            console.log(super.b);     //undefined
            
            
            /*
             *  1唆垃、這里的super是一個對象,因為constructor是個普通對象
             *      1痘儡、super指向父類的原型對象辕万,調(diào)用的是Father的共享方法showB()
             *      2、showB方法里的this指向子類的實例,取的是Father的constructor里定義的b
             */
            super.showB();  //這是父類身上的共享方法,并且會彈出子類實例的b
            
            
            //2渐尿、super獲取屬性
            console.log(super.a);   //父類原型的a   再次驗證只能調(diào)用原型上的東西醉途。原型上與constructor里都有個a,但是調(diào)的是原型上的
        }
    }
    Son.b='子類的私有屬性b';
    new Son();
}

在私有方法中使用

此時切記用super的用法與在普通方法中的用法完全相反

{
    class Father{
        constructor(){
            this.b='父類實例的b';
        }
        showB(){
            console.log(`這是父類身上的共享方法,并且會彈出${this.b}`);
        }
        static showB(){ //這是個私有方法砖茸,與上面的方法重名是可以的
            console.log(`這是父類身上的私有方法,并且會彈出${this.b}`);
        }
    }
    Father.prototype.b='父類原型的b';   //在原型身上的添加一個屬性b
    
    class Son extends Father{
        constructor(){
            super();
            this.b='子類實例的b';
        }
        
        /*
         *  1隘擎、這里的super是在私有方法里調(diào)用,所以指向父類凉夯,調(diào)用的是Father里定義的static showB方法
         *  2货葬、此方法里的this指向被改成了子類,彈出的b是子類的私有屬性b
         */
        static log(){
            super.showB();
        }
    }
    Son.b='子類的私有屬性b';
    Son.log();  //這是子類身上的私有方法,并且會彈出子類的私有屬性b
}

忠告:要明確指定supe的類型

super在用的時候必需指定它的類型劲够,不然不清不楚的去用震桶,瀏覽器會給你報錯!

{
    class Father{};
    class Son extends Father{
        constructor(){
            super();    //這個是作為函數(shù)
            //console.log(super);   //報錯  那這個super它是個什么呢征绎?它自己矛盾了蹲姐,瀏覽器迷茫了~
            console.log(super.a);   //這個是作為對象
        }
    }
}

下一篇,實戰(zhàn)人柿!硬邦邦的干貨

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柴墩,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子顷扩,更是在濱河造成了極大的恐慌拐邪,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隘截,死亡現(xiàn)場離奇詭異扎阶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)婶芭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門东臀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人犀农,你說我怎么就攤上這事惰赋。” “怎么了呵哨?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵赁濒,是天一觀的道長。 經(jīng)常有香客問我孟害,道長拒炎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任挨务,我火速辦了婚禮击你,結(jié)果婚禮上玉组,老公的妹妹穿的比我還像新娘。我一直安慰自己丁侄,他們只是感情好惯雳,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸿摇,像睡著了一般石景。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上户辱,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天鸵钝,我揣著相機(jī)與錄音糙臼,去河邊找鬼庐镐。 笑死,一個胖子當(dāng)著我的面吹牛变逃,可吹牛的內(nèi)容都是我干的必逆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼揽乱,長吁一口氣:“原來是場噩夢啊……” “哼名眉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起凰棉,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤损拢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后撒犀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體福压,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年或舞,在試婚紗的時候發(fā)現(xiàn)自己被綠了荆姆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡映凳,死狀恐怖胆筒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诈豌,我是刑警寧澤仆救,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站矫渔,受9級特大地震影響彤蔽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蚌斩,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一铆惑、第九天 我趴在偏房一處隱蔽的房頂上張望范嘱。 院中可真熱鬧,春花似錦员魏、人聲如沸丑蛤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽受裹。三九已至,卻和暖如春虏束,著一層夾襖步出監(jiān)牢的瞬間棉饶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工镇匀, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留照藻,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓汗侵,卻偏偏與公主長得像幸缕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子晰韵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

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

  • 這是16年5月份編輯的一份比較雜亂適合自己觀看的學(xué)習(xí)記錄文檔发乔,今天18年5月份再次想寫文章,發(fā)現(xiàn)簡書還為我保存起的...
    Jenaral閱讀 2,756評論 2 9
  • v 把 v 海關(guān)監(jiān)管機(jī)構(gòu)吧和 v 哈哈 vv 寶寶 v 你吧
    雪零人參閱讀 166評論 0 0
  • 凌君初來這個城市的時候,是奔著她親三舅來的只恨。所有的親戚中译仗,就他家過的好,開了家大飯店坤次,在郊區(qū)住著三層別墅古劲。 其他的...
    不回首2020閱讀 228評論 0 0
  • 面朝大海滑绒,春暖花開闷堡,到底是自由的向往還是簡單的渴望陽光。那個困頓的歲月中疑故,海子一個才華橫溢的詩人杠览,面對生活,卻走不...
    90后青衣閱讀 1,854評論 23 16
  • 眼神像云一樣失落 在你嘆息的時候 我去做一個長長的夢 夢見給孩子上課 在操場上打太極 讀詩集 春風(fēng)卷著柔情 低低地...
    宇斯閱讀 326評論 0 2