javascript中class的繼承的基礎用法

在es6中class可通過關鍵詞extends來實現繼承,es5則是修改原型鏈來實現繼承的。

語法部分


javascript中class的繼承的基礎用法


  1. 上述代碼有兩個類,分別是universe和earth,後者繼承前者,這樣earth就擁有了universe的屬性和方法了。
  2. 有一個注意點:就是子類在constructor方法中調用super,super就是父類的構造函數,我們必須先構造父類,才能使用子類。
  3. 如果子類不顯式聲明constructor,那麼子類會自動調用,但是如果你自己要顯式聲明,那麼要記住第一件事就是調用super().
  4. 只有調用super之後,你才可以使用this和實例化,否則都會報錯。


完整部分


javascript中class的繼承的基礎用法

  • 這裡的代碼跟上面的沒什麼區別,注意看子類中fn1這個函數,他使用了父類的sky屬性,注意在子類使用父類的屬性時,只能使用this來調用,使用super是找不到的,因為class中的屬性都是實例屬性。
  • 但是如果是函數,使用this或者super都是可以調用的到,比如在constructor方法中調用了父類的rotate方法,這裡使用this.rotate()或者super.rotate()都是可以的,因為函數都是在原型上的。


es5中的繼承

es5中的繼承則是讓某個構造函數的原型對象等於另一個類型的實例,這樣實現的繼承。

javascript中class的繼承的基礎用法

相信大家都可以看懂,es5的繼承就讓子類的prototype等於父類的實例,即可完成繼承。

相比之下,es6的繼承肯定更清晰,而且更方便,不過es6的繼承也是通過原型來操作的,只是給我們封裝了。


分享到:


相關文章: