JS之理解ES6 繼承extends

理解ES6繼承extends

1.在es6中對繼承有了更友好的方式。在下面的繼承中那到底在extends的時候作了什麼，super()又是表明什麼意思。

class People{
constructor(name, age) {
  this.name = name;
  this.age = age;}
  
say(){
  alert("hello")}
  
static see(){
  alert("how are you")}}

class lily extends People{
  constructor(){
     super()}
  goodbye(){alert("goodbye")}}

2.解析extends和super()

• ①在前面的文章中有說起class聲明類的原理：https://segmentfault.com/a/11...

• ②lily是People的子類，首先lily也是一個類；extends的過程當中建立了一個自執行函數，並將父類傳進去，繼承父類以後再返回該子類。lily.__proto__指的是當前對象所屬類的原型,也就是Object.getPrototypeOf(lily).

  var lily = function(_People) {
     inherits(lily, _People);  //第一步，繼承父類原型
     function lily() {         //第二步，繼承父類對象屬性
       return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
     createClass(lily, [{     //第三步，建立子類本身的方法
      key: "goodbye",
      value: function goodbye() {
      alert("goodbye");}}]);
     
     return lily;
   }(People);

• ③繼承的過程：通常繼承分兩步，call繼承+原型的繼承 （分別繼承父類對象屬行和原型屬性）

  • 第一步：繼承父類的原型，經過Object.create，第一個參數是建立一個對象的原型，定義原型上的屬性constructor指向subclass；把父類的原型方法繼承給子類原型；

    function inherits(subClass, superClass) {
       subClass.prototype = Object.create(superClass && superClass.prototype, {
         constructor: {
           value: subClass,
           enumerable: false,
           writable: true,
           configurable: true
         }
       });
       if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
     }

  • 第二步：call繼承，就是super()的處理過程，super()的實質就是People.call(this);把父類的對象方法繼承給子類對象；這也是爲何在es6的繼承時必需要加上super()，由於不加的話沒法繼承到父類的對象屬性。

    function _possibleConstructorReturn(self, call) { 
       //call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
       return call && (typeof call === "object" || typeof call === "function") ? call : self;

  • 第三部：建立子類本身的方法。 能夠參考class裏面的實現過程。

總的來講es6的extends的實質和之前的繼承方式是一致 的，可是有了更好的，更清晰的表現形式。