react中constructor( )和super( )

1.constructor( )-----super( )的基本含義

constructor( )——構造方法

這是ES6對類的預設方法，通過 new 指令生成對象執行個體時自動調用該方法。并且，該方法是類中必須有的，如果沒有顯示定義，則會預設添加空的constructor( )方法。

super( ) ——繼承

在class方法中，繼承是使用 extends 關鍵字來實作的。子類必須在constructor( )調用 super( )方法，否則建立執行個體時會報錯。

報錯的原因是：子類是沒有自己的 this 對象的，它隻能繼承自父類的 this 對象，然後對其進行加工，而super( )就是将父類中的this對象繼承給子類的。沒有super，子類就得不到 this 對象。

constructor(props){
    super(props)
    //不論認不認識，都先綁定上
    this.showInput=this.showInput.bind(this)
    this.handleBlur=this.handleBlur.bind(this)


}
           

2.Es5-----Es6關于繼承的實作不同之處

出現上面情況的原因是，ES5的繼承機制與ES6完全不同。

複習一個重要知識點——ES5中new到底做了些啥？

當一個構造函數前加上new的時候，背地裡來做了四件事：

1.生成一個空的對象并将其作為 this；

2.将空對象的 proto 指向構造函數的 prototype；

3.運作該構造函數；

4.如果構造函數沒有 return 或者 return 一個傳回 this 值是基本類型，則傳回this；如果 return 一個引用類型，則傳回這個引用類型。

簡單解釋，就是在ES5的繼承中，先建立子類的執行個體對象this，然後再将父類的方法添加到this上（ Parent.apply(this) ）。而ES6采用的是先建立父類的執行個體this（故要先調用 super( )方法），完後再用子類的構造函數修改this。

3.super(props)------super()-----以及不寫super的差別

如果你用到了constructor就必須寫super(),是用來初始化this的，可以綁定事件到this上;

如果你在constructor中要使用this.props,就必須給super加參數：super(props)；

（無論有沒有constructor，在render中this.props都是可以使用的，這是React自動附帶的；）

如果沒用到constructor,是可以不寫的；React會預設添加一個空的constructor。

Appendix

轉自：江木