再和“面向對象”談戀愛 - super（六）

Towers 發布于2019-08-23 10:45 / 1899人閱讀

摘要：同時彈出的結果是指向了子類，又說明雖然調用的是父類的構造函數，但是調用完后會指向子類，指向也被改成了子類的實例。

在上一篇文章里介紹了繼承，那其中說過一個很關鍵的東西想要繼承子類里里必需先調用一個super方法。而super的作用絕對是價值連城！同時super的作用還有多種，并且跟你的使用環境有關系。

1、當作函數使用

super被當作函數使用，這種情況是最普遍的，上一篇文章里已經使用過。它有以下幾種作用：

super作為函數調用時，代表父類的構造函數

調用super后，this會被改成子類

只能用在構造函數里，用在其它地方報錯

{
    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，但是發現生成子類實例后，控制臺里有輸出。說明：super其實相當于執行了父級的constructor方法。同時彈出的結果是指向了子類，又說明雖然調用的是父類的構造函數，但是調用完后會指向子類，this指向也被改成了子類的實例。其實supe的作用相當于執行Father.prototype.constructor.call(this);

2、當作對象使用

super也可以被當作對象使用，被當作對象使用的時候情況有些復雜，跟上面是完全不一樣的，同時又按使用環境分為了兩種情況。

在普通方法中，指向父類的原型對象

* 只能調用原型里的東西
* 如果調用的是方法，那方法內部this指向子類實例
* 如果用super去添加屬性的話，super就是this(實例)

在私有方法中，指向父類，而不是父類的原型

* 如果調用的是方法，那方法內部this指向子類而不是子類實例

在普通方法中使用

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

{
    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是個方法，作用為引入父類的構造函數（當作函數使用）
            this.b="子類實例的b";
            
            //此處聲明：請按注釋標的序號順序執行代碼
            
            //
            /*
             *  3、super設置屬性
             *      1、用super設置屬性的話，super就代表當前環境的this。而當前環境為子類的constructor，所以此時的super代表的就是子類的實例對象
             *      2、此時下面的showB()方法彈出的內容為"這是父類身上的共享方法,并且會彈出super就是this"是因為，如果super為this的話，那就與上面那段代碼重復了，后面覆蓋前面
             *
             */
            super.b="super就是this";
            
            
            /*
             *  4、super獲取屬性
             *      1、此時super的作用是獲取屬性，它依然指向父類的原型對象所以下面這句話相當于console.log(Father.prototype.b);所以結果為undefined。雖然在上面定義了super.b那也不會改變super的指向
             */
            console.log(super.b);      //undefined
            
            
            /*
             *  1、這里的super是一個對象，因為constructor是個普通對象
             *      1、super指向父類的原型對象，調用的是Father的共享方法showB()
             *      2、showB方法里的this指向子類的實例，取的是Father的constructor里定義的b
             */
            super.showB();    //這是父類身上的共享方法,并且會彈出子類實例的b
            
            
            //2、super獲取屬性
            console.log(super.a);   //父類原型的a   再次驗證只能調用原型上的東西。原型上與constructor里都有個a，但是調的是原型上的
        }
    }
    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是在私有方法里調用，所以指向父類，調用的是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();    //這個是作為函數
            //console.log(super);    //報錯  那這個super它是個什么呢？它自己矛盾了，瀏覽器迷茫了~
            console.log(super.a);   //這個是作為對象
        }
    }
}

下一篇，實戰！

云服務器 GPU云服務器對象面向對象面向對象面向對象思維面向對象特性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96654.html

再和“面向對象”談戀愛 - 圖片預加載組件（七）

摘要：源碼下載至此再和面向對象談戀愛系列文章已經全部更新完畢寫文章不易，且行且珍惜再和面向對象談戀愛 - 對象簡介（一）再和面向對象談戀愛 - 對象相關概念（二）再和面向對象談戀愛 - 面向對象編程概念（三）再和面向對象談戀愛 - class（四）再和面向對象談戀愛 - 繼承（五）再和面向對象談戀愛 - super（六）通過前面的六篇文章已經把ES6的面向對象跟大伙說清楚了，大家最關心的...

caoym 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - 繼承（五）

摘要：面向對象里最大的特點應該就屬繼承了。在第二篇文章里說過原型實例跟構造函數之間的繼承，并且還講了一道推算題。通過上一篇文章想必各位老鐵已經熟悉了class了，這篇文章接著介紹繼承。面向對象里最大的特點應該就屬繼承了。一個項目可能需要不斷的迭代、完善、升級。那每一次的更新你是要重新寫呢，還是在原有的基礎上改吧改吧呢？當然，不是缺心眼的人肯定都會在原來的基礎上改吧改吧，那這個改吧改吧就需要...

Airmusic 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - 面向對象編程概念（三）

摘要：說到底面向對象才是程序語言的根本。其實面向對象編程說的就是自定義對象。里并沒有類的概念，所以嚴格上來講這是個假的面向對象里的面向對象編程現在好了，終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統語言更靠齊了。通過前兩篇文章，我們了解了對象的概念以及面向對象里的相關概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細去說第三種自定義對象，那真正的好戲這就來了！面向對象...

Cruise_Chan 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - class（四）

摘要：在上一篇文章里我介紹了一下面向對象編程的概念，在最后終于喜出望外看到了提供了類的概念了。而到了里面真正的類與構造函數現在是分離的，通過上面的代碼可以看出來，這種寫法正是面向對象的正統寫法。在上一篇文章里我介紹了一下面向對象編程的概念，在最后終于喜出望外看到了ES6提供了類的概念了。那這個類如何去用，是這篇文章的主題。ES6給我們提供了一個class關鍵字。這個關鍵字跟以前的var l...

劉東 2019-08-23 10:45 評論0 收藏0
再和“面向對象”談戀愛 - 對象相關概念（二）

摘要：所有的對象都是由構造函數創建的對象哪來的構造函數生的。而普通函數不能生成對象不孕不育，構造函數可以生成對象有生育能力。別急，記住那句話永遠指向實例對象對應的構造函數的，那就先看實例對象是誰。上一篇文章把對象的概念講解了一下，這篇文章要重點解釋最讓大家犯迷糊的一些概念，包括構造函數實例繼承構造函數的屬性與方法（私有屬性與方法）實例的屬性與方法（共享屬性與方法） protot...

qpwoeiru96 2019-08-23 10:44 評論0 收藏0