再理解es6 中的 class super extends

說明

• 適用於 es6 初學者
• 理解 class 的使用

extends 繼承

• class 能夠經過 extends 關鍵字實現繼承，這比 ES5 的經過修改原型鏈實現繼承，要清晰和方便不少。

class Point{
    
}

class ColorPoint extends Point{
    
}
複製代碼

上面代碼定義了一個ColorPoint類，該類經過extends關鍵字，繼承了Point類的全部屬性和方法。可是因爲沒有部署任何代碼，因此這兩個類徹底同樣，等於複製了一個Point類。下面，咱們在ColorPoint內部加上代碼。

super 調用父類 constructor

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調用父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 調用父類的toString()
  }
}
複製代碼

• super 來調用父類的 constructor

子類沒有定義 constructor，會默認添加

class ColorPoint extends Point {
}

// 等同於
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}
複製代碼

合理的使用 super

super 當作函數調用

• 第一種狀況，super 關鍵字做爲函數調用。es6 中，子類的構造函數必須執行一次 super（記住咱們能夠不寫 constructor 和 super ，函數會自動添加上，看👆的 case）

class A {}

class B extends A {
  constructor() {
    super();
  }
}
複製代碼

注意，super雖然表明了父類A的構造函數，可是返回的是子類B的實例，即super內部的this指的是B，所以super()在這裏至關於A.prototype.constructor.call(this)。

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B
複製代碼

上面代碼中，new.target指向當前正在執行的函數。能夠看到，在super()執行時，它指向的是子類B的構造函數，而不是父類A的構造函數。也就是說，super()內部的this指向的是B。

super 當作對象使用

• 第二種狀況,super做爲對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();
複製代碼