1. 程式人生 > >react中constructor( )和super( )的具體含義以及如何使用

react中constructor( )和super( )的具體含義以及如何使用

react中這兩個API出鏡率超級高,但是一直不太懂這到底是幹嘛的,有什麼用;今天整理一下,方便自己檢視同時方便大家。

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。

--------如有錯誤之處,歡迎指正--------