es6中的super怎么用

這篇“es6中的super怎么用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es6中的super怎么用”文章吧。

super的用法：1、super作為函數時，用于表示父類的構造函數，語法為“constructor(){super();}”；2、super作為對象時，在普通方法中用于指向父類的原型對象，在靜態方法中用于指向父類。

本教程操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6中super的用法是什么

第一種情況：super作為函數時，代表父類的構造函數

ES6要求，子類的構造函數，必須執行一次super函數

class A {}
class B extends A {
  constructor() {
    super();//子類的構造函數，必須執行一次super函數，代表父類的構造函數
  }
}

注意：雖然super代表父類的構造函數，但此時返回的時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作為函數使用時，必須出現在子類的構造函數constructor中,否則會報錯

class A {}
class B extends A {
  m() {
    super(); // 報錯
  }
}

第二種情況：super作為對象時，在普通方法中，指向父類的原型對象，在靜態方法中，指向父類

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父類的構造函數
    console.log(super.p()); // 2
  }
}
let b = new B();

上面代碼中，super作為函數時，代表父類的構造方法，作為對象時，指向父類的原型對象，即A.prototype，所以super.p()相當于A.prototype.p()

這里還需要注意，由于 super指向父類的原型，所以在父類實例上的屬性或者方法，并不能通過super調用

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined

上面代碼中，p是父類A實例的屬性，super.p 就引用不到它

如果屬性是定義在父類的原型上，則使用super就可以訪問

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

上面代碼中，屬性x是定義在父類的原型對象上，所以可以使用super.x來訪問

以上就是關于“es6中的super怎么用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。