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

原因：衍生出的建構子不會創造新的this對象，也就是子類別沒有自己的this；只有透過super()把基底類別（父類別）建立好的this物件接下來，衍生類別才能像基底類別一樣使用this來產生物件的屬性。

本教學操作環境：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。 衍生出的建構子不會創造新的<span style="background-color:#ffd900;">this</span>#物件<span style="background-color:#ffd900;">(或說this指向的物件</span>(這裡可以回顧一下new關鍵字做的事情)，就是所說的"子類別沒有自己的this"。只有透過<span style="background-color:#ffd900;">super()</span>把基底類別建立好的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。

【相關推薦：javascript影片教學、程式設計影片】

以上是es6的class繼承為什麼要呼叫super的詳細內容。更多資訊請關注PHP中文網其他相關文章！