es6中class繼承調用super的原因是什么

本文小編為大家詳細介紹“es6中class繼承調用super的原因是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“es6中class繼承調用super的原因是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

在學習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的原因是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。