ES6 中的Class中的關鍵字super

Raaabbit 發布于2019-08-22 16:32 / 626人閱讀

摘要：在類的繼承中，有兩個用法作為函數使用，如上邊的例子中的作為對象使用，如把作為函數使用在類的繼承中，子類如果顯式的聲明了構造函數，則必須首先調用，不然會找不到。此時代表父類的構造函數。如果在繼承中子類壓根不寫構造函數呢不過不寫，相當于也寫了。

復習一下ES6 中的關于類的語法 定義一個類

class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}

相當于下面ES5的這樣的寫法

function Animal(){
   this.type = "animal";
}

Animal.prototype.speak = function(){
   console.log(this.type);
}

類的繼承

class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
}

相當于下面ES5的寫法

function Animal(){
   this.type = "animal";
}

Animal.prototype.speak = function(){
   console.log(this.type);
}

function Cat(){
  Animal.call(this);
  this.type = "animal";
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;//因為上一步造成constructor為Animal

//或者可以把上邊的兩行改成下面這樣的寫法
Cat.prototype = Object.create(Animal.prototype, {
  constructor: Cat,
});

super登場

從上邊的例子可能已經領略了super的一些用法了。但是還不全面。super在類的繼承中，有兩個用法

作為函數使用，如上邊的例子中的super()

作為對象使用，如super.type

1. 把super作為函數使用

在類的繼承中，子類如果顯式的聲明了構造函數，則必須首先調用super，不然會找不到this。此時super代表父類的構造函數。這時在構造函數里調用super（），相當于 parentConstructor.call(this). 還是以上邊的實際例子為例。

class Cat extends Animal {
    constructor(){
        super();   // 相當于  Animal.call(this)
        this.type = "cat"
    }
}

現在再解釋一個疑問。如果在繼承中子類壓根不寫構造函數呢？不過不寫，相當于也寫了。只是構造函數用的是父類的構造函數

class Cat extends Animal {
}

// 相當于
class Cat extends Animal {
    constructor(...args){
             super(...args);
    }
}

2.把super作為對象使用

super作為對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

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

class Animal {
    constructor(){
        this.type = "animal";
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
               console.log(super.type)
    }
}
new Cat();  // 此處打印出來的是type on propotype，而不是animal

在靜態方法中指向父類

class Animal {
  static type = "this is static type";
    constructor(){
        this.type = "animal";
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
  static miao(){
    console.log(super.type);  // 這里輸出的是this is static type，而不是animal或者type on propotype
  }
}

Cat.miao()

云服務器 GPU云服務器 es6中的class es6中的promise cdn加速中的關鍵技術,cdn技術詳細解剖, es6class

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

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

ES6 class繼承與super關鍵詞深入探索

摘要：請看對應版本干了什么可知，相當于以前在構造函數里的行為。這種寫法會與上文中寫法有何區別我們在環境下運行一下，看看這兩種構造函數的有何區別打印結果打印結果結合上文中關于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統面向對象語言的class寫法，ES6發布之后，Babel迅速跟進，廣大開發者也很快喜歡上ES6帶...

jubincn 2019-08-26 10:58 評論0 收藏0
ES6—class與面向對象編程（8）

摘要：接下來我們看下類的寫法，這個就很接近于傳統面向對象語言了。如果你想了解傳統面向對象語言，這里是一個好切入點。作為對象時，指向父類的原型對象。這些就是為將來在中支持面向對象的類機制而預留的。在ES5中，我們經常使用方法或者對象去模擬類的使用，并基于原型實現繼承，雖然可以實現功能，但是代碼并不優雅，很多人還是傾向于用 class 來組織代碼，很多類庫、框架創造了自己的 API 來實現 c...

wangjuntytl 2019-08-26 18:27 評論0 收藏0
由一篇ES6繼承文章引發對于super關鍵字的思考

摘要：舉個栗子中一段簡單的繼承代碼實現使用了，不會報錯這段代碼非常簡單，在子類中使用了關鍵字，編譯時不會報錯，也可以正常執行。參考資料從中的講原型鏈與繼承的靜態屬性和實例屬性問題引入最近一直在看原型繼承相關的東西，翻到這么一篇文章：從ES6中的extends講js原型鏈與繼承文中有一個點讓我很感興趣，箭頭函數在繼承過程中無法通過super關鍵字獲取，這是為什么呢？前置知識 MDN上...

mudiyouyou 2019-08-23 11:30 評論0 收藏0
ES6 中Class創建對象與繼承實現

摘要：使用類創建實例對象也是直接對類使用命令，跟中構造函數的用法一致。中沒有構造函數，作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構造函數的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向對象語言寫法。 ES6中通過class定義對象，默認具有constructor方法和自定義方法，但是包含...

zhou_you 2019-08-20 14:40 評論0 收藏0
ES6 中Class創建對象與繼承實現

摘要：使用類創建實例對象也是直接對類使用命令，跟中構造函數的用法一致。中沒有構造函數，作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構造函數的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向對象語言寫法。 ES6中通過class定義對象，默認具有constructor方法和自定義方法，但是包含...

wind5o 2019-08-01 16:25 評論0 收藏0