js中ES6語法的super到底是什么?

ES6 中的繼承和 super 的用法大家都不會陌生,可是一問到 super 到底是什么,估計很對人都會回答不上來。在 ES6 中,super 是一個特殊的語法,而且它比 this 還要特殊,有很多用法上的限制。

super類似于ES5語法中的call繼承
class A{
    constructor(n){
        console.log(n); //=>100;
        this.x = 100;
    }
    getX(){
        console.log(this.x);
    }
}

class B extends A{//=>extends 類似實現(xiàn)原型繼承
    constructor(){
        super(100);//=>類似于call的繼承:在這里super相當于把A的constructor給執(zhí)行了,并且讓方法中的this是B的實例,super當中傳遞的實參都是在給A的constructor傳遞。
        this.y = 200;
    }
    getY(){
        console.log(this.y);
    }
}

let f = new B();
super用法
  • 既然 super 是一個可以調用的東西,它是一個函數么?
    這個問題的答案很容易找到,可以把 super 賦值到其它變量試試,會得到一個語法錯誤。
class A extends Object {
  constructor() {
    const a = super;  //=>Uncaught SyntaxError: 'super' keyword unexpected here
    a(); 
  }
};

因為 super 的詞法定義是伴隨后面那對括號的,它和 this 不同。this 的定義是 this 這個關鍵字會被替換成一個引用,而 super 則是 super(…) 被替換成一個調用。而且 super 除了在 constructor 里直接調用外還可以使用 super.xxx(…) 來調用父類上的某個原型方法,這同樣是一種限定語法。

 class A {
      constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型對象上的屬性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);

    }
  }

 class B extends A{
  constructor() {
    super('cat','white');
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new B()
 cat.toString();  //=>name:cat,color:white
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容