1.constructor( )-----super( )的基本含義
constructor( )——構造方法
這是ES6對類的默認方法,通過 new 命令生成對象實例時自動調用該方法。並且,該方法是類中必須有的,如果沒有顯示定義,則會默認添加空的constructor( )方法。
super( ) ——繼承
在class方法中,繼承是使用 extends 關鍵字來實現的。子類 必須 在 constructor( )調用 super( )方法,否則新建實例時會報錯。
報錯的原因是:子類是沒有自己的 this 對象的,它只能繼承自父類的 this 對象,然后對其進行加工,而super( )就是將父類中的this對象繼承給子類的。沒有 super,子類就得不到 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。
用es6的class(類)的方法創建組件:
子類繼承父類的屬性:需要使用super()繼續父類的屬性,同時創建this(子類本身沒有this);
如果像上圖一樣需要定義props的屬性 this.props.xixi="哈哈",則需要用 super(props)
如果不定義props的屬性,只定義狀態this.state ,就可以直接super();
這是為什么呢?
其實很簡單,因為this.props必須要是一個對象,才能在它下面定義屬性
而constructor(props){}傳入的參數props為對象
所以super(props)的作用就是在父類的構造函數中給props賦值一個對象this.props=props這樣就能在它的下面定義你要用到的屬性了,然而其他的由於沒有傳參就直接賦值為undefind
由於state下面沒有屬性,所以如果只是定義state就可以直接super()就行了