ES5和ES6继承的执行顺序和区别

直接上例子

// ES5 继承
function parent(params) {
  
}
parent.prototype.sayName = function () {
  console.log('parent');
}

function childen(params) {
  parent.apply(this)
}

childen.prototype.sayName = function () {
  console.log('childen');
}

childen.prototype = new parent();

let c = new childen();

c.sayName(); // parent


// ES6 继承
class Parent {
  sayName() {
    console.log('parent');
  }
}
class Childen extends Parent {
  constructor() {
    super()
  }
  sayName() {
    console.log('childen');
  }
}

let cc = new Childen();

cc.sayName(); // childen

 

ES5的继承是通过prototype或构造函数机制来实现。

ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上(Parent.apply(this))。

ES6的继承机制实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this。具体为ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。

class继承中，子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

注意：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。

---

上面的例子简单总结：

ES5是先创建子类，然后把父类的this添加到子类上面，距离this最近的是父类，所有this指向父类，把子类的方法覆盖掉；

ES6是先创建父类，然后把子类的this添加到父类上面，距离this最近的是子类，所有this指向子类，把父类的方法覆盖掉；