ES6 继承和 ES5 继承的差异

ES5 之继承

基于构造函数的继承

function Parent1() {
  this.parent1 = 'parent1'
  this.arr = [1, 2, 3]
}
Parent1.prototype.walk = 'I can walk'
function Child1() {
  Parent1.call(this)
  this.child1 = 'child1'
}
const child11 = new Child1()
const child12 = new Child1()
// 测试
child11.parent1 // parent1
child11.walk    // undefined
child11.arr.push(4)
child11.arr // [1, 2, 3, 4]
child12.arr // [1, 2, 3]

优点：构造函数的属性具有唯一性(child11.arr 与 child12.arr)，可参考红皮书里的细节
缺点：只能继承父类函数的方法和属性，而不能继承原型对象的方法和属性

基于原型链的继承

function Parent2() {
  this.parent2 = 'parent2'
  this.arr = [1, 2, 3]
}
Parent2.prototype.walk = 'I can walk'
function Child2() {
  this.child2 = 'child2'
}
Child2.prototype = new Parent2()
const child21 = new Child2()
const child22 = new Child2()
// 测试
child21.parent2 // parent2
child21.walk    // I can walk
child21.arr.push(4)
child21.arr // [1, 2, 3, 4]
child22.arr // [1, 2, 3, 4]

优点：继承父类函数的方法和属性同时继承了原型对象的方法和属性
缺点：当在一个子类的实例上修改父类的属性和方法时，其它的子类也会受到影响(相当于改变了子类原型链上的属性，可以参考二刷高程

——— 补充 ———

补充下 Object.create() 这个 api，也将它归类到基于原型链的继承。当继承的对象属性没变化时，可以使用它。

优点：可以少写一个构造函数
缺点：同上述基于原型链继承的缺点

组合继承

function Parent3() {
  this.parent3 = 'parent3'
  this.arr = [1, 2, 3]
}
Parent3.prototype.walk = 'I can walk'
function Child3() {
  Parent3.call(this)  // 这里执行第一次父类
  this.child3 = 'child3'
}
Child3.prototype = new Parent3() // 这里执行第二次父类，原型继承发现只要把父子的原型对象绑定起来就好，可以写成 Child3.prototype = new Parent3()>__proto__ 也正常
const child31 = new Child3()
const child32 = new Child3()
// 测试
child31.parent3 // parent3
child31.walk    // I can walk
child31.arr.push(4)
child31.arr // [1, 2, 3, 4]
child32.arr // [1, 2, 3]

优点：结合了构造函数继承和原型链继承的优点

缺点：父类方法调用了两次，而且不能判断实例的构造函数是子类还是父类

组合继承优化一

function Parent4() {
  this.parent4 = 'parent4'
  this.arr = [1, 2, 3]
}
Parent4.prototype.walk = 'I can walk'
function Child4() {
  Parent4.call(this)
  this.child4 = 'child4'
}
Child4.prototype = Parent4.prototype
const child41 = new Child4()
const child42 = new Child4()
// 测试
child41.parent4 // parent4
child41.walk    // I can walk
child41.arr.push(4)
child41.arr // [1, 2, 3, 4]
child42.arr // [1, 2, 3]
child41.constructor // Parent4

优点：解决了调用两次的问题
缺点：不能判断实例的构造函数是子类还是父类(此时 child41、child42 的构造函数指向 Parent4)

组合继承优化二

function Parent5() {
  this.parent5 = 'parent5'
  this.arr = [1, 2, 3]
}
Parent5.prototype.walk = 'I can walk'
function Child5() {
  Parent5.call(this)
  this.child5 = 'child5'
}
Child5.prototype = Object.create(Parent5.prototype) // Object.create() 创建了一个中间对象，起到隔离子类和父类的作用。
Child5.prototype.constructor = Child5
const child51 = new Child5()
const child52 = new Child5()
// 测试
child51.parent5 // parent5
child51.walk    // I can walk
child51.arr.push(4)
child51.arr // [1, 2, 3, 4]
child52.arr // [1, 2, 3]
child51.constructor // Child5

Object.create() 的作用：Object.create(Parent5.prototype) 相当于一个空对象 {}，这个空对象的 proto 等于 Parent5.prototype，所以这时候我们修改 Child5.prototype.constructor 实际上是在空对象上加上 constructor 属性。

优点：解决了不能判断实例的构造函数是子类还是父类的问题

揭秘 ES6 继承之 super

constructor 中的 super

function Parent(props) {
  this.props = props
}
class Child extends Parent {
  constructor() {
    super() // 这里
  }
}
var child = new Child({a: 1})
console.log(child.props) // undefined

为什么这里 child.props 会输出 undefined 呢，让我们接着看以下两个例子。

function Parent(props) {
  this.props = props
}
class Child extends Parent {
  constructor(props) {
    super(props)
  }
}
var child = new Child({a: 1})
console.log(child.props) // {a: 1}

function Parent(props) {
  this.props = props
}
class Child extends Parent {
}
var child = new Child({a: 1})
console.log(child.props) // {a: 1}

可以看到第二种情况和第三种情况是相等的。继承中，当子类没有写 constructor 时，它会自动加上如下代码：

constructor(props) {
  super(props)
}

简单作个结论：当 ES6 的类函数中有 constructor 和 super 时，它们后面必须得跟个参数 props(名字随意)，否则原型链上的对象无法获取到相应属性。

将之翻译成 ES5，代码如下：

function Parent(props) {
  this.props = props
}
function Child(props) {
  Parent.call(this, props) // 这里等价于 ES6 中 super(props)
}
Child.prototype = new Parent()
var child = new Child({a: 1})

作为对象调用的 super

在下面的案例中，super 作为对象调用，那么它指向什么呢？

class Parent {
  parentFn() {
    console.log('I am parentFn')
  }
}
class Child extends Parent {
  childFn() {
    console.log(super.constructor)
    super.parentFn()
  }
}
var child = new Child()
child.childFn()
// Class Parent { ... }
// I am parentFn

打印结果已经作出了回答。super 在作为对象调用时，它指向了父类对象的实例。