react中這兩個(gè)API出鏡率超級(jí)高，但是一直不太懂這到底是干嘛的，有什么用徒像。今天整理一遍發(fā)現(xiàn)黍特，不是新知識(shí)讀不懂，而是我的原型鏈知識(shí)點(diǎn)太不扎實(shí)了锯蛀。本著方便他人順帶著娛樂自己的原則灭衷，特整理這篇文章，以備后查旁涤！
- constructor( )——構(gòu)造方法
這是ES6對(duì)類的默認(rèn)方法翔曲，通過 new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且劈愚，該方法是類中必須有的瞳遍，如果沒有顯示定義，則會(huì)默認(rèn)添加空的constructor( )方法菌羽。
ES5中掠械，JavaScript是沒有繼承的寫法的，因此注祖，通過使用 prototype 來達(dá)到目的猾蒂。舉個(gè)例子：
//構(gòu)造函數(shù)People
function People (name,age){
this.name = name;
this.age = age
}
People.prototype.sayName = function(){
return '我的名字是：'+this.name;
}
//創(chuàng)建新的子類p1
let p1 = new People('harrisking',23);
但是在ES6中，可以通過class 來實(shí)現(xiàn)是晨。舉個(gè)例子：
class People{
//構(gòu)造方法constructor就等于上面的構(gòu)造函數(shù)People
constructor(name,age){
this.name = name;
this.age = age;
}
sayName(){
return '我的名字是：'+this.name;
}
}
//創(chuàng)建新的子類p1
let p1 = new People('harrisking',23);
上面兩個(gè)例子等價(jià)肚菠。其實(shí)class方法完全就是對(duì)象原型的語法糖，效果是完全一樣的罩缴。
原型鏈知識(shí)我們一起復(fù)習(xí)一下：
仔細(xì)看這圖你就會(huì)發(fā)現(xiàn)案糙，也有constructor，這個(gè)之前我也知道靴庆，但是死活沒想起來他們倆是一個(gè)東西时捌。好吧，這回我們就清楚了炉抒，構(gòu)造方法constructor( )其實(shí)就是構(gòu)造函數(shù)本身奢讨。
- super( ) ——繼承
在class方法中，繼承是使用 extends 關(guān)鍵字來實(shí)現(xiàn)的焰薄。舉例如下：
class People{
constructor(name,age){
this.name = name;
this.age = age;
}
sayName(){
return '我的名字是：'+this.name;
}
}
class har extends People{
constructor(name,age,sex){
super(name,age);//調(diào)用父類的constructor(name,age)
this.sex = sex;
}
haha(){
return this.sex + ' ' + super.sayName();//調(diào)用父類的sayName()
}
}
上面的例子中拿诸，出現(xiàn)了 super( )，子類 必須 在 constructor( )調(diào)用 super( )方法塞茅，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)亩码。（不要問為什么！）
好吧我憋不住了野瘦，我還是告訴你為什么吧描沟。報(bào)錯(cuò)的原因是：子類是沒有自己的 this 對(duì)象的飒泻，它只能繼承自父類的 this 對(duì)象，然后對(duì)其進(jìn)行加工吏廉，而super( )就是將父類中的this對(duì)象繼承給子類的泞遗。沒有 super，子類就得不到 this 對(duì)象席覆，沒有 this 對(duì)象而要對(duì) this 進(jìn)行處理史辙，能不報(bào)錯(cuò)嗎？
class Ha{/*某些代碼*/}
class haha extends Ha{
constructor(){}
}
let haha1 = new haha();ReferenceError報(bào)錯(cuò)
上面的代碼中佩伤，haha繼承了父類 Ha聊倔，但是他的構(gòu)造函數(shù)沒有調(diào)用 super( )方法，導(dǎo)致新建實(shí)例時(shí)報(bào)錯(cuò)生巡。
出現(xiàn)上面情況的總原因是方库，ES5的繼承機(jī)制與ES6完全不同。
復(fù)習(xí)一個(gè)重要知識(shí)點(diǎn)——ES5中new到底做了些啥障斋？
當(dāng)一個(gè)構(gòu)造函數(shù)前加上new的時(shí)候，背地里來做了四件事：
1.生成一個(gè)空的對(duì)象并將其作為 this徐鹤；
2.將空對(duì)象的 __proto__ 指向構(gòu)造函數(shù)的 prototype垃环；
3.運(yùn)行該構(gòu)造函數(shù)；
4.如果構(gòu)造函數(shù)沒有 return 或者 return 一個(gè)返回 this 值是基本類型返敬，則返回this遂庄；如果 return 一個(gè)引用類型，則返回這個(gè)引用類型劲赠。
原來寫過文章提到過涛目，需要請(qǐng)點(diǎn)擊!
簡(jiǎn)單解釋，就是在ES5的繼承中凛澎，先創(chuàng)建子類的實(shí)例對(duì)象this霹肝，然后再將父類的方法添加到this上（ Parent.apply(this) ）。而ES6采用的是先創(chuàng)建父類的實(shí)例this（故要先調(diào)用 super( )方法）塑煎，完后再用子類的構(gòu)造函數(shù)修改this沫换。
補(bǔ)充：
1.子類如果沒有 constructor 方法，該方法會(huì)被默認(rèn)添加最铁，即任何的子類都有 constructor 方法讯赏，無論定義沒定義，它就在那里冷尉，不離不棄漱挎。
2.在子類的構(gòu)造函數(shù) constructor( )中，只有調(diào)用 super( )方法之后雀哨，才可以使用 this關(guān)鍵字磕谅，否則會(huì)報(bào)錯(cuò)。
關(guān)于這兩個(gè)方法，你懂了嗎怜庸？
THE END!
