首先，es5和es6的继承有区别：
简单来说es5是子类的原型指向父类 子类再作为构造函数去生成新对象 这样就会一改都改
共享实例属性,属于引用类型传值es6则是用关键字class定义类, extends关键字实现继承 super指代 这样就是新对象了
以下内容来自https://zhuanlan.zhihu.com/p/359282706
ES5的继承
ES5的继承是先创建子类的实例, 然后再创建父类的方法添加到this上.
通过原型和构造函数机制实现的.
// ES5的继承
// 原型链方式: 子类的原型指向父类的实例
// 缺点: 1. 因为原型链继承共享实例属性,属于引用类型传值, 修改某个实例的属性会影响其他的实例 2. 不能实时向父类的构造函数中传值, 很不方便
function Parent() {
this.values = [1];
}
function Child(){
}
Child.prototype = new Parent();
const child1 = new Child();
console.log(child1.values); // [ 1 ]
child1.values.push(2);
const child2 = new Child();
console.log(child2.values); // [ 1, 2 ]ES6的继承
ES6的继承是先创建父类的实例对象this(必须先调用super方法), 再调用子类的构造函数修改this.
通过关键字class定义类, extends关键字实现继承. 子类必须在constructor方法中调用super方法否则创建实例报错. 因为子类没有this对象, 而是使用父类的this, 然后对其进行加工
super关键字指代父类的this, 在子类的构造函数中, 必须先调用super, 然后才能使用this
// ES6的继承
// 在子类的构造器中先调用super(), 创建出父类实例, 然后再去修改子类中的this去完善子类
class Parent {
constructor(a, b) {
this.a = a;
this.b = b;
}
}
class Child extends Parent {
constructor(a, b, c) {
super(a, b);
this.c = c;
}
}
const child = new Child(1, 2, 3);
console.log(child); // { a: 1, b: 2, c: 3 }