React中super(props)和super()以及不寫super()的區別


一.constructor()和super()的基本含義

constructor() —— 構造方法

這是ES6對類的默認方法,通過new命令生成對象實例自動調用的方法。並且,該方法是類中必須要有的,如果沒有顯示定義,則會默認添加空的constructor()方法。

super() —— 繼承

在class方法中,繼承是使用extends關鍵字來實現繼承的。子類必須在constructor()中調用super()方法,否則新建實例時會報錯。
報錯的原因是,子類是沒有自己的this對象的,它只能繼承父類的this對象,然后對其進行加工,而super()就是將父類中的this對象繼承給子類的。沒有super,子類就得不到this對象。

ES5和ES6關於繼承的實現不同之處

在ES5中,當一個構造函數前面加上new的時候,其實一共做了四件事:

1.生成一個空的對象並將其作為this
2.將空對象的__proto__指向構造函數的prototype
3.運行該構造函數
4.如果構造函數沒有return或者return一個返回this值是基本類型,則返回this,如果return一個引用類型,則返回這個引用類型

簡單解釋,就是在ES5的繼承中,先創建子類的實例對象this,然后再將父類的方法添加到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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM