重学JS 系列：聊聊继承(推荐)

function Parent(value) {
 this.val = value
}
Parent.prototype.getValue = function() {
 console.log(this.val)
}
function Child(value) {
 Parent.call(this, value)
}
Child.prototype = new Parent()

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

function Parent(value) {
 this.val = value
}
Parent.prototype.getValue = function() {
 console.log(this.val)
}

function Child(value) {
 Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
 constructor: {
  value: Child,
  enumerable: false,
  writable: true,
  configurable: true
 }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

function _possibleConstructorReturn (self, call) { 
  // ...
  return call && (typeof call === 'object' || typeof call === 'function') "text-align: left">以上代码就是编译出来的部分代码，隐去了一些非核心代码，我们先来阅读 _inherits 函数。

设置子类原型部分的代码其实和寄生组合继承是一模一样的，侧面也说明了这种实现方式是最好的。但是这部分的代码多了一句 Object.setPrototypeOf(subClass, superClass)，其实这句代码的作用是为了继承到父类的静态方法，之前我们实现的两种继承方法都是没有这个功能的。
然后 Child 构造函数这块的代码也基本和之前的实现方式类似。所以总的来说 Babel 实现继承的方式还是寄生组合继承，无非多实现了一步继承父类的静态方法。


继承存在的问题
讲了这么些如何实现继承，现在我们来考虑下继承是否是一个好的选择？
总的来说，我个人不怎么喜欢继承，原因呢就一个个来说。
我们先看代码。假如说我们现在要描述几辆不同品牌的车，车必然是一个父类，然后各个品牌的车都分别是一个子类。


class Car {
  constructor (brand) {
    this.brand = brand
  }
  wheel () {
    return '4 个轮子'
  }
  drvie () {
    return '车可以开驾驶'
  }
  addOil () {
    return '车可以加油'
  }
}
Class OtherCar extends Car {}




这部分代码在当下看着没啥毛病，实现了车的几个基本功能，我们也可以通过子类去扩展出各种车。
但是现在出现了新能源车，新能源车是不需要加油的。当然除了加油这个功能不需要，其他几个车的基本功能还是需要的。
如果新能源车直接继承车这个父类的话，就出现了第一个问题 ，大猩猩与香蕉问题。这个问题的意思是我们现在只需要一根香蕉，但是却得到了握着香蕉的大猩猩，大猩猩其实我们是不需要的，但是父类还是强塞给了子类。继承虽然可以重写父类的方法，但是并不能选择需要继承什么东西。
另外单个父类很难描述清楚所有场景，这就导致我们可能又需要新增几个不同的父类去描述更多的场景。随着不断的扩展，代码势必会存在重复，这也是继承存在的问题之一。
除了以上两个问题，继承还存在强耦合的情况，不管怎么样子类都会和它的父类耦合在一起。
既然出现了强耦合，那么这个架构必定是脆弱的。一旦我们的父类设计的有问题，就会对维护造成很大的影响。因为所有的子类都和父类耦合在一起了，假如更改父类中的任何东西，都可能会导致需要更改所有的子类。


如何解决继承的问题
继承更多的是去描述一个东西是什么，描述的不好就会出现各种各样的问题，那么我们是否有办法去解决这些问题呢？答案是组合。
什么是组合呢？你可以把这个概念想成是，你拥有各种各样的零件，可以通过这些零件去造出各种各样的产品，组合更多的是去描述一个东西能干什么。
现在我们把之前那个车的案例通过组合的方式来实现。


function wheel() {
 return "4 个轮子";
}
function drvie() {
 return "车可以开驾驶";
}
function addOil() {
 return "车可以加油";
}
// 油车
const car = compose(wheel, drvie, addOil)
// 新能源车
const energyCar = compose(wheel, drive)




从上述伪代码中想必你也发现了组合比继承好的地方。无论你想描述任何东西，都可以通过几个函数组合起来的方式去实现。代码很干净，也很利于复用。
最后
其实这篇文章的主旨还是后面两小节的内容，如果你还有什么疑问欢迎在评论区与我互动。
我所有的系列文章都会在我的 Github 中最先更新，有兴趣的可以关注下。今年主要会着重写以下三个专栏

  
重学 JS
  
React 进阶
  
重写组件

以上所述是小编给大家介绍的JS继承详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！