ECMAScript 6入門類繼承筆記

類繼承

看類繼承前，先回顧構造函數怎麼實現對象的繼承的

function F() {
            this.a = 1;
        }
        function Son() {
            F.call(this);
        } 
        function inherit(S, F) {
            S.prototype = Object.create(F.prototype);
            S.prototype.constructor = S;
        }
        inherit(Son, F);
        let son = new Son();

它實現了哪幾個功能：

• 繼承F的this屬性也就是F實例對象的屬性
• Son.prototype.__proto__ === F.prototype 實現了上下輩分的繼承
• son.constructor讓son認祖歸宗

一樣類繼承也是如此

用來extends和super關鍵字，看一個簡單的繼承

class A {
            constructor() {
                this.a = 1;
            }
        }
        class B extends A {
            constructor() {
                super();
                this.b = 2;
            }
            m() {

            }
        }
        let b = new B();

一樣實現了那三點基本功能

B {a: 1, b: 2}
b.__proto__  == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B

我認爲：關鍵字extends實現了原型的繼承，以及constructor的修正；關鍵字super實現了父類this的繼承，這裏的super至關於A.prototype.constructor.call(this)

注意點

• 寫了constructor，就必須在裏面寫super，否則new子類實例對象會報錯；要麼都不寫；其次子類的中constructor中的this屬性必須寫在super後面

  1.ES5 的繼承，實質是先創造子類的實例對象this，而後再將父類的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機制徹底不一樣，實質是先將父類實例對象的屬性和方法，加到this上面（因此必須先調用super方法），而後再用子類的構造函數修改this
  2.由於子類本身的this對象，必須先經過父類的構造函數完成塑造，獲得與父類一樣的實例屬性和方法，而後再對其進行加工，加上子類本身的實 例屬性和方法。若是不調用super方法，子類就得不到this對象。

  class B extends A {
              constructor() {    //要麼都不寫，new時默認會自動生成
                  super();
                  this.b = 2;    //寫在super後面
              } 
              m() {
  
              }
          }

super的各類指向問題

• super做爲函數，只能放在子類的constructor中，指向A.prototype.constructor.call(this)

• super做爲對象，在子類普通方法中調用,super就是父類的原型也就是A.prototype；因此只能調用原型鏈上的方法，不能動用父類實例的方法和屬性constructor{}中的不能調用

  class A {
              constructor() {
  
                  this.a = 1;
              }
              n() {
  
                  return this;
              }
          }
          class B extends A {
              constructor() {
                  
                  super();
                  this.b = 2;
                  
              }
              m() {
                  return super.n();
              }
          }
          let b = new B();
          b === b.m();

  而且規定

  在子類普通方法中經過super調用父類的方法時，方法內部的this指向當前的子類實例。

  因此上面return this 就是返回子類實例對象

• super做爲對象對屬性賦值時
  super至關於this，賦值屬性也就成了子類實例的屬性

  class A {
    constructor() {
      this.x = 1;
    }
  }
  
  class B extends A {
    constructor() {
      super();
      this.x = 2;
      super.x = 3;
      console.log(super.x); // undefined
      console.log(this.x); // 3
      console.log(super.valueOf() instanceof B);   //true
    }
  }
  
  let b = new B();

• super做爲對象，在靜態方法中指向的是父類能調用父類的靜態方法，若是方法內部有this則指向當前的子類
  只有類才能調用類的靜態方法

  class A {
              constructor() {
  
                  this.a = 1;
              }
              static n() {
  
                  return this;
              }
          }
          class B extends A {
              constructor() {
                  
                  super();
                  this.b = 2;
                  
              }
              static m() {
                  return super.n();
              }
          }
          console.log(A.n() === A)   // true
          console.log(B === B.m());  //true

  因爲對象老是繼承其餘對象的，因此能夠在任意一個對象中，使用super關鍵字。

  var obj = {
    toString() {
      return "MyObject: " + super.toString();
    }
  };
  Object.getPrototypeOf(obj).toString = function () {
      return "這裏super等於obj.__proto__";
  }
  console.log(obj.toString());        //MyObject: 這裏super等於obj.__proto__

類的prototype與__proto__

（1）子類的__proto__屬性，表示構造函數的繼承，老是指向父類。
（2）子類prototype屬性的__proto__屬性，表示方法的繼承，老是指向父類的prototype屬性。

類的繼承模式

class A {
}

class B {
}

// B 的實例繼承 A 的實例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 繼承 A 的靜態屬性
Object.setPrototypeOf(B, A);

const b = new B();

也是由於這種實現因此類能調用本身的靜態方法

es6實現了原始構造函數的繼承

以前Array.apply(this)this並不會塑造Array裏面的內部結構，因此咱們當咱們用類數組對象引用數組方法時用null代替了
而es6用類實現它的繼承，
代碼摘自es6入門

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

須要注意的是

ES6 改變了Object構造函數的行爲，一旦發現Object方法不是經過new Object()這種形式調用，ES6 規定Object構造函數會忽略參數。

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr === true  // false

傳入參數會無效的