Part 2 代码复用(继承VS组合)

版权声明:共同学习,共同进步,转载请附上原文链接 https://blog.csdn.net/wy6250000/article/details/84286492

谈这个主题之前,我们先来聊聊代码复用,很多时候我们要复用一段代码时,发出的第一个呐喊就是“我要继承!”。

但实际上把继承的目的定为代码复用,本身就是一个错误的理解,那继承到底是干嘛的,往下看...


JS中是使用原型来模拟继承的,如:

而继承的真正目的是向上转型实现多态 ,那么什么是多态,什么是向上转型?

多态:把“不变的”和“可变的”分开(把“做什么”和“谁去做”分开),同一操作作用于不同的对象可以产生不同的执行结果,便于扩展。如:

 

上述例子中,所有的动物都会发声 这是不变的

不同动物叫声是不同的,把不同的部分以相同的接口封装到各自的类型当中

向上转型:当在一个类上给一个类型变量赋值时,这个变量的类型既可以是这个类本身的实例,也可以是这个类的超类(父类及以上)

如:Person p = new Student(); (Person是父类类型,Student是子类类型)

继承、向上转型、多态的关系是:继承-->向上转型-->多态 


在前端中,继承多用于框架上,如组件生命周期:模板方法模式

在React中体现更明显(本人还未接触过React,摘来大神的code了解下)

 

所以说继承并不是为了代码复用,那么要代码复用怎么做呢?

>>>组合

在vue中:mixin混入可以实现组合,即代码复用

缺点是改变了原有的对象,容易命名冲突,依赖不清 。


另外用到组合思想的还有函数式组件:指定部分参数来产生一个定制函数

 prop接收用户配置,产生一个新的组件


此外了解下高阶组件,另一个使用组合思想的方法:一个函数参数接收一个组件,返回一个新组件(React中便于实现,Vue比较困难)

 总结:在Vue中推荐研究混入和函数式组件

猜你喜欢

转载自blog.csdn.net/wy6250000/article/details/84286492