React (ES6)類的繼承 super()方法的由來以及作用


此處類的繼承講解的是ES6的語法以及語義

ES6 的繼承機制,是先創造  父類的實例對象,  然后再用    子類的   構造函數     修改。

因此,如果子類中      顯式調用    構造方法 constructor(){} ,必須要在子類構造方法中調用 super() 方法。如果不

不調用 super 方法,子類就得不到 this 對象。

這里解釋下什么是  顯示調用(自己的理解):就是在子類中出現了  構造方法 constructor(){}     這就是所謂的  顯示調用     ,整的奇奇怪怪的,讓新手很難懂,其實也就那么回事。

接下來,直接上代碼:

class Run { p() { console.log('ppp'); } } class Man extends Run { // 顯式調用構造方法 
 constructor() { } p() { alert(1) } a() { alert(2) } } var m = new Man(); m.p(); m.a();

可以看到,聲明了兩個類,Run和Man,然后在Run中寫了個p方法,Man類繼承Run,並顯示調用了構造方法,但沒有在其中寫super方法,然后實例化了Man類,

嘗試調用p方法,顯示報錯

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

顯而易見,必須有super方法才能獲得this,那么this的作用是啥呢?什么是this呢?這里稍后再說。。。。

先說下,Man類,在這個類中,有個p方法,和a方法,我加p方法的原因是為了嘗試用子類的方法覆蓋父類的方法,看能不能成功調用,結果是。。報錯(就是上面的錯誤,這和Man沒有p方法,然后調用Run的p方法結果是一樣的,都報那個錯誤)

再說說這個a方法,我想着,調用父類的方法,你報錯,重寫父類的方法你也報錯,那調用我自己類(Man)中的方法行不行呢?  結果。。還是那個錯誤。

 

如何不出現那個錯誤呢?

1:不寫構造方法

2:不繼承

但是,顯然這兩個解決辦法都行不通,因為,這違反了,面向對象的特點,重點是變的麻煩了,所以只好  添上   super方法了。

super方法的作用:

一句話,獲取子類this並且獲取父類的this,但因為是在子類的構造方法中調用的super方法,所以,父類的this指向子類的this,即都為子類的this。

this的作用:

什么是this,this就是當前類,也可以叫做當前對象。什么是當前類?在Run類   中,this就是類Run,當你實例化Run類時,就得到Run類的對象,此時this就是當前對象。實例化對象其本質是開辟空間,得到指針,指針指向類。簡單的來說,類是真實的物體,而,對象是物體的地址。而this的作用就是找到物體的地址,用this調用方法就是先利用地址找到物體,然后並使用物體中的某些功能,這就是this的作用:找到物體的地址,即,得到內存中  指針的  地址,並指向它。

 

有繼承就記得寫super方法,有了super()就可以調用父類和子類的方法了。

什么時候有繼承但不需要super方法呢?

答:不調用子類中和父類中的方法,子類只是單純的返回個DOM樹,此時該類只是個組件,可以用函數組件代替。

 


免責聲明!

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



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