汇总有关JS对象的创建与继承

　　之前也有和大家讲过有关JS的对象创建和对象继承，本篇文章主要为大家做个汇总和梳理。

　　JS中其实就是原型链继承和构造函数继承的“毛病”，还有就是“工厂、构造、原型”设计模式与JS继承。

       JS高级程序设计4：class继承的重点，不只是简简单单的语法而已。

　　对象创建

　　不难发现，每一篇都离不开工厂、构造、原型这3种设计模式中的至少其一！

　　那JS为什么非要用到这种3种设计模式了呢？？

　　我们先从对象创建讲起：

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

　　当有两个或多个这样的对象需要声明时，无法一直这样复制下去的：

　　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")}
　　}

　　这样写：

　　其实上面写的不仅麻烦，而且代码量也比较大；

　　也不必方便修改，比如当car对象要增删改一个属性，需要多处进行增删改；

　　工厂函数

　　肯定是要封装啦，第一个反应，可以借助函数来帮助我们批量创建对象~

　　于是乎：

　　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")

　　上面的是工厂设计模式在JS创建对象时应用的由来~

　　如果有其他需求，比如，需要创建car4、car5、car6对象，它们要在原有基础上再新增一个brand属性，会怎么写？

　　第一反应，直接修改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")

　　这代码是错误的，会影响原有的car1、car2、car3对象；

　　那再重新写一个makeCarChild工厂函数行不行？

　　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")

　　为了方便，全量复制之前的属性，建立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")

　　构造函数区别于工厂函数：

　　函数名首字母通常大写；

　　创建对象的时候要用到new关键字（new的过程这里不再赘述了，之前文章有）；

　　函数没有return，而是通过this绑定来实现寻找属性的；

　　到此为止，工厂函数的复用也解决了。

　　构造+原型

　　新的问题在于，我们不能通过查找原型链从MakeCarChild找到MakeCar

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

　　无论在原型链上怎么找，都无法从MakeCarChild找到MakeCar

　　这样也就明白了，子类不能继承父类原型上的属性

　　这里提个思考问题：为什么“要从原型链查找到”很重要？为什么“子类要继承父类原型上的属性”？就靠this绑定来找不行吗？

　　于是乎，构造函数设计模式+原型设计模式的【组合继承】应运而生　

　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()//原型继承父类的构造器
　　MakeCarChild.prototype.constructor=MakeCarChild//重置constructor
　　let car4=new MakeCarChild("benz","400","white","run fast")

　　现在再找原型，就找的到啦：

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

　　其实，能到这里，就已经很很优秀了，该有的都有了，写法也不算是很复杂。

　　工厂+构造+原型

　　但，总有人在追求极致。

　　上述的组合继承，父类构造函数被调用了两次，一次是call的过程，一次是原型继承new的过程，如果每次实例化，都重复调用，肯定是不可取的，怎样避免？

　　工厂+构造+原型=寄生组合继承应运而生

　　核心是，通过工厂函数新建一个中间商F()，复制了一份父类的原型对象，再赋给子类的原型；

　　function object(o){//工厂函数
　　function F(){}
　　F.prototype=o;
　　return new F();//new一个空的函数，所占内存很小
　　}
　　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){//构造函数
　　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

　　再到后来，ES6的class作为寄生组合继承的语法糖：

　　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的底层实现原理#22

　　对象与函数

　　最后本瓜想再谈谈关于JS对象和函数的关系：

　　即使是这样声明一个对象，let obj={}，它一样是由构造函数Object构造而来的：

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

　　在JS中，万物皆对象，对象都是有函数构造而来，函数本身也是对象。

　　对应代码中的意思：

　　所有的构造函数的隐式原型都等于Function的显示原型，函数都是由Function构造而来，Object构造函数也不例外；

　　所有构造函数的显示原型的隐式原型，都等于Object的显示原型，Function也不例外；

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

　　对于这个设计我只可以给一个大大的无语了。

　　先这样说吧：Function就是上帝，上帝创造了万物；Object就是万物。万物由上帝创造（对象由函数构造而来），上帝本身也属于一种物质（函数本身却也是对象）；

　　对于本篇来说，继承，其实都是父子构造函数在继承，然后再由构造函数实例化对象，以此来实现对象的继承。

　　到底是谁在继承？函数？对象？都是吧~~

　　小结

　　本篇由创建对象说起，讲了工厂函数，它可以做一层最基本的封装；

　　再到，对工厂的拓展，演进为构造函数；

　　再基于原型特点，构造+原型，得出组合继承；

　　再追求极致，讲到寄生组合；

　　再讲到简化书写的Es6 class；

　　以及最后对对象与函数的思考。

     本篇文章到此结束了，欢迎大家关注后续更多精彩内容。