之前也有和大家講過(guò)有關(guān)JS的對(duì)象創(chuàng)建和對(duì)象繼承，本篇文章主要為大家做個(gè)匯總和梳理。

　　JS中其實(shí)就是原型鏈繼承和構(gòu)造函數(shù)繼承的“毛病”，還有就是“工廠、構(gòu)造、原型”設(shè)計(jì)模式與JS繼承。

       JS高級(jí)程序設(shè)計(jì)4：class繼承的重點(diǎn)，不只是簡(jiǎn)簡(jiǎn)單單的語(yǔ)法而已。

　　對(duì)象創(chuàng)建

　　不難發(fā)現(xiàn)，每一篇都離不開(kāi)工廠、構(gòu)造、原型這3種設(shè)計(jì)模式中的至少其一！

　　那JS為什么非要用到這種3種設(shè)計(jì)模式了呢？？

　　我們先從對(duì)象創(chuàng)建講起：

　　let car={
　　price:100,
　　color:"white",
　　run:()=>{console.log("run fast")}
　　}

　　當(dāng)有兩個(gè)或多個(gè)這樣的對(duì)象需要聲明時(shí)，無(wú)法一直這樣復(fù)制下去的：

　　let car1={
　　price:100,
　　color:"white",
　　run:()=>{console.log("run fast")}
　　}
　　let car2={
　　price:200,
　　color:"balck",
　　run:()=>{console.log("run slow")}
　　}
　　let car3={
　　price:300,
　　color:"red",
　　run:()=>{console.log("broken")}
　　}

　　這樣寫(xiě)：

　　其實(shí)上面寫(xiě)的不僅麻煩，而且代碼量也比較大；

　　也不必方便修改，比如當(dāng)car對(duì)象要增刪改一個(gè)屬性，需要多處進(jìn)行增刪改；

　　工廠函數(shù)

　　肯定是要封裝啦，第一個(gè)反應(yīng)，可以借助函數(shù)來(lái)幫助我們批量創(chuàng)建對(duì)象~

　　于是乎：

　　function makeCar(price,color,performance){
　　let obj={}
　　obj.price=price
　　obj.color=color
　　obj.run=()=>{console.log(performance)}
　　return obj
　　}
　　let car1=makeCar("100","white","run fast")
　　let car2=makeCar("200","black","run slow")
　　let car3=makeCar("300","red","broken")

　　上面的是工廠設(shè)計(jì)模式在JS創(chuàng)建對(duì)象時(shí)應(yīng)用的由來(lái)~

　　如果有其他需求，比如，需要?jiǎng)?chuàng)建car4、car5、car6對(duì)象，它們要在原有基礎(chǔ)上再新增一個(gè)brand屬性，會(huì)怎么寫(xiě)？

　　第一反應(yīng)，直接修改makeCar

　　function makeCar(price,color,performance,brand){
　　let obj={}
　　obj.price=price
　　obj.color=color
　　obj.run=()=>{console.log(performance)}
　　obj.brand=brand
　　return obj
　　}
　　let car4=makeCar("400","white","run fast","benz")
　　let car5=makeCar("500","black","run slow","audi")
　　let car6=makeCar("600","red","broken","tsl")

　　這代碼是錯(cuò)誤的，會(huì)影響原有的car1、car2、car3對(duì)象；

　　那再重新寫(xiě)一個(gè)makeCarChild工廠函數(shù)行不行？

　　function makeCarChild(price,color,performance,brand){
　　let obj={}
　　obj.price=price
　　obj.color=color
　　obj.run=()=>{console.log(performance)}
　　obj.brand=brand
　　return obj
　　}
　　let car4=makeCarChild("400","white","run fast","benz")
　　let car5=makeCarChild("500","black","run slow","audi")
　　let car6=makeCarChild("600","red","broken","tsl")

　　為了方便，全量復(fù)制之前的屬性，建立N個(gè)相像的工廠，這種方法不行。

　　構(gòu)造函數(shù)

　　于是乎，在工廠設(shè)計(jì)模式上，發(fā)展出了：構(gòu)造函數(shù)設(shè)計(jì)模式，來(lái)解決以上復(fù)用（也就是繼承）的問(wèn)題。

　　function MakeCar(price,color,performance){
　　this.price=price
　　this.color=color
　　this.run=()=>{console.log(performance)}
　　}
　　function MakeCarChild(brand,...args){
　　MakeCar.call(this,...args)
　　this.brand=brand
　　}
　　let car4=new MakeCarChild("benz","400","white","run fast")
　　let car5=new MakeCarChild("audi","500","black","run slow")
　　let car6=new MakeCarChild("tsl","600","red","broken")

　　構(gòu)造函數(shù)區(qū)別于工廠函數(shù)：

　　函數(shù)名首字母通常大寫(xiě)；

　　創(chuàng)建對(duì)象的時(shí)候要用到new關(guān)鍵字（new的過(guò)程這里不再贅述了，之前文章有）；

　　函數(shù)沒(méi)有return，而是通過(guò)this綁定來(lái)實(shí)現(xiàn)尋找屬性的；

　　到此為止，工廠函數(shù)的復(fù)用也解決了。

　　構(gòu)造+原型

　　新的問(wèn)題在于，我們不能通過(guò)查找原型鏈從MakeCarChild找到MakeCar

　　car4.__proto__===MakeCarChild.prototype//true
　　MakeCarChild.prototype.__proto__===MakeCar.prototype//false
　　MakeCarChild.__proto__===MakeCar.prototype//false

　　無(wú)論在原型鏈上怎么找，都無(wú)法從MakeCarChild找到MakeCar

　　這樣也就明白了，子類(lèi)不能繼承父類(lèi)原型上的屬性

　　這里提個(gè)思考問(wèn)題：為什么“要從原型鏈查找到”很重要？為什么“子類(lèi)要繼承父類(lèi)原型上的屬性”？就靠this綁定來(lái)找不行嗎？

　　于是乎，構(gòu)造函數(shù)設(shè)計(jì)模式+原型設(shè)計(jì)模式的【組合繼承】應(yīng)運(yùn)而生　

　function MakeCar(price,color,performance){
　　this.price=price
　　this.color=color
　　this.run=()=>{console.log(performance)}
　　}
　　function MakeCarChild(brand,...args){
　　MakeCar.call(this,...args)
　　this.brand=brand
　　}
　　MakeCarChild.prototype=new MakeCar()//原型繼承父類(lèi)的構(gòu)造器
　　MakeCarChild.prototype.constructor=MakeCarChild//重置constructor
　　let car4=new MakeCarChild("benz","400","white","run fast")

　　現(xiàn)在再找原型，就找的到啦：

　　car4.__proto__===MakeCarChild.prototype//true
　　MakeCarChild.prototype.__proto__===MakeCar.prototype//true

　　其實(shí)，能到這里，就已經(jīng)很很優(yōu)秀了，該有的都有了，寫(xiě)法也不算是很復(fù)雜。

　　工廠+構(gòu)造+原型

　　但，總有人在追求極致。

　　上述的組合繼承，父類(lèi)構(gòu)造函數(shù)被調(diào)用了兩次，一次是call的過(guò)程，一次是原型繼承new的過(guò)程，如果每次實(shí)例化，都重復(fù)調(diào)用，肯定是不可取的，怎樣避免？

　　工廠+構(gòu)造+原型=寄生組合繼承應(yīng)運(yùn)而生

　　核心是，通過(guò)工廠函數(shù)新建一個(gè)中間商F()，復(fù)制了一份父類(lèi)的原型對(duì)象，再賦給子類(lèi)的原型；

　　function object(o){//工廠函數(shù)
　　function F(){}
　　F.prototype=o;
　　return new F();//new一個(gè)空的函數(shù)，所占內(nèi)存很小
　　}
　　function inherit(child,parent){//原型繼承
　　var prototype=object(parent.prototype)
　　prototype.constructor=child
　　child.prototype=prototype
　　}
　　function MakeCar(price,color,performance){
　　this.price=price
　　this.color=color
　　this.run=()=>{console.log(performance)}
　　}
　　function MakeCarChild(brand,...args){//構(gòu)造函數(shù)
　　MakeCar.call(this,...args)
　　this.brand=brand
　　}
　　inherit(MakeCarChild,MakeCar)
　　let car4=new MakeCarChild("benz","400","white","run fast")

　　car4.__proto__===MakeCarChild.prototype//true
　　MakeCarChild.prototype.__proto__===MakeCar.prototype//true

　　ES6 class

　　再到后來(lái)，ES6的class作為寄生組合繼承的語(yǔ)法糖：

　　class MakeCar{
　　constructor(price,color,performance){
　　this.price=price
　　this.color=color
　　this.performance=performance
　　}
　　run(){
　　console.log(console.log(this.performance))
　　}
　　}
　　class MakeCarChild extends MakeCar{
　　constructor(brand,...args){
　　super(brand,...args);
　　this.brand=brand;
　　}
　　}
　　let car4=new MakeCarChild("benz","400","white","run fast")

　car4.__proto__===MakeCarChild.prototype//true
　　MakeCarChild.prototype.__proto__===MakeCar.prototype//true

　　有興趣的工友，可以看下ES6解析成ES5的代碼：原型與原型鏈-ES6 Class的底層實(shí)現(xiàn)原理#22

　　對(duì)象與函數(shù)

　　最后本瓜想再談?wù)勱P(guān)于JS對(duì)象和函數(shù)的關(guān)系：

　　即使是這樣聲明一個(gè)對(duì)象，let obj={}，它一樣是由構(gòu)造函數(shù)Object構(gòu)造而來(lái)的：

　　let obj={}
　　obj.__proto__===Object.prototype//true

　　在JS中，萬(wàn)物皆對(duì)象，對(duì)象都是有函數(shù)構(gòu)造而來(lái)，函數(shù)本身也是對(duì)象。

　　對(duì)應(yīng)代碼中的意思：

　　所有的構(gòu)造函數(shù)的隱式原型都等于Function的顯示原型，函數(shù)都是由Function構(gòu)造而來(lái)，Object構(gòu)造函數(shù)也不例外；

　　所有構(gòu)造函數(shù)的顯示原型的隱式原型，都等于Object的顯示原型，F(xiàn)unction也不例外；

　　//1.
　　Object.__proto__===Function.prototype//true
　　//2.
　　Function.prototype.__proto__===Object.prototype//true

　　對(duì)于這個(gè)設(shè)計(jì)我只可以給一個(gè)大大的無(wú)語(yǔ)了。

　　先這樣說(shuō)吧：Function就是上帝，上帝創(chuàng)造了萬(wàn)物；Object就是萬(wàn)物。萬(wàn)物由上帝創(chuàng)造（對(duì)象由函數(shù)構(gòu)造而來(lái)），上帝本身也屬于一種物質(zhì)（函數(shù)本身卻也是對(duì)象）；

　　對(duì)于本篇來(lái)說(shuō)，繼承，其實(shí)都是父子構(gòu)造函數(shù)在繼承，然后再由構(gòu)造函數(shù)實(shí)例化對(duì)象，以此來(lái)實(shí)現(xiàn)對(duì)象的繼承。

　　到底是誰(shuí)在繼承？函數(shù)？對(duì)象？都是吧~~

　　小結(jié)

　　本篇由創(chuàng)建對(duì)象說(shuō)起，講了工廠函數(shù)，它可以做一層最基本的封裝；

　　再到，對(duì)工廠的拓展，演進(jìn)為構(gòu)造函數(shù)；

　　再基于原型特點(diǎn)，構(gòu)造+原型，得出組合繼承；

　　再追求極致，講到寄生組合；

　　再講到簡(jiǎn)化書(shū)寫(xiě)的Es6 class；

　　以及最后對(duì)對(duì)象與函數(shù)的思考。

     本篇文章到此結(jié)束了，歡迎大家關(guān)注后續(xù)更多精彩內(nèi)容。