es6的class繼承為什麼要呼叫super

原因：派生出的建構函式不會創造新的this物件，即子類沒有自己的this；只有通過super()把基礎類別（父類別）建立好的this物件接下來，派生類才能像基礎類別一樣使用this來生成物件的屬性。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

在學習ES6 class繼承時往往提到一個關鍵點

一個子類 SubClass 繼承父類別 SuperClass 的構造器constructor時有兩個要求：

1）必須在構造器呼叫 super( )。
2) this必須寫在super( )之後。

第一點是為了解決父類別子類的歧義，確定了

「子類沒有自己的 this」這一概念

子類和父類別是個相對的概念，因為一個類可以既是子類也是父類別，所以ES6裡用的是絕對的概念：基礎類別和派生類。而且這個概念是針對所有建構函式說的，JS 裡的建構函式要麼是基的，要麼就是派生的。

ES6中,我們隨手寫的建構函式(function)都是基礎類別，基礎類別可以直接用this來指向呼叫它所在方法的物件。

咱自己給this總結了一句話：誰呼叫了this，this就指向誰。

        function Super(name) {
            this.name = name；
            SuperFactory.prototype.sayHi = function () {
                console.log("Hi");
            }
        }
 
       let super = new Super("peter");//通過new建立了新的物件，Super()中的this即指向這個物件
登入後複製

ES6中的派生類，就是extend的class。派生出的建構函式不會創造新的this物件(或者說this指向的物件(這裡可以回顧一下new關鍵字做的事情)，就是所說的"子類沒有自己的this"。只有通過super()把基礎類別建立好的this物件接下來，派生類才能像基礎類別一樣使用this來生成物件的屬性。

 class SuperClass {                //基礎類別 not父類別
    constructor(name) {
        this.name = name;
        }
     sayHi() {
        console.log("Hi");
        }
    }；
 
class SubClass extends SuperClass {//派生類 not子類
    constructor(name，age) {
                surpe(name);
                this.age = age；
            }
    sayNo() {
        console.log("NO");
        }
    }；
        
let subinst = new subClass('tom',18);
subinst.sayHi();//Hi
subinst.sayNo();//NO
登入後複製

那this為什麼必須寫在super( )之後

是為了避免一個程式碼陷阱。

class Person {
  constructor(name) {
    this.name = name;
  }
}
 
class PolitePerson extends Person {
  constructor(name) {
    this.greetColleagues(); // 這裡不允許我們使用this,下面解釋
    super(name);
  }
  greetColleagues() {
    alert('Good morning folks!');
  }
}
登入後複製

上面的例子假設呼叫 super( )之前允許使用 this, 一段時間後為了滿足一些需求，我們在 greetColleagues( ) 中新增：

greetColleagues() {
    alert('Good morning folks!');
    alert('My name is ' + this.name + ', nice to meet you!');
  }
登入後複製

但是我們忘了，this.greetColleagues( ) 在 super( )呼叫之前，this.name根本都沒有定義，程式碼會拋錯，像這樣的程式碼可能很難想到什麼時候發生。

因此，為了避免這個陷阱，JavaScript 強制要求在 constructor 中使用 this 之前，必須先呼叫 super。

【相關推薦：、】

以上就是es6的class繼承為什麼要呼叫super的詳細內容，更多請關注TW511.COM其它相關文章！