ES5/ES6 的继承除了写法以外还有什么区别

在 ES5 和 ES6 中，继承除了写法不同之外，还有以下一些区别：

一、语法简洁性

• ES5：通过构造函数和原型链实现继承，代码相对复杂。例如：

  function Parent(name) {
       
    this.name = name;
  }
  Parent.prototype.sayName = function() {
       
    console.log(this.name);
  };
  function Child(name, age) {
       
    Parent.call(this, name);
    this.age = age;
  }
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
  

• ES6：使用 class 和 extends 关键字，语法更加简洁清晰。例如：

  class Parent {
       
    constructor(name) {
       
        this.name = name;
    }
    sayName() {
       
        console.log(this.name);
    }
  }
  class Child extends Parent {
       
    constructor(name, age) {
       
        super(name);
        this.age = age;
    }
  }
  

二、原型和构造函数的处理

• ES5：需要手动处理原型链的连接，并且在子类型构造函数中通过 Parent.call(this) 来调用父类型构造函数实现属性继承，容易出现错误。
• ES6：extends 关键字自动处理了原型链的连接，super 关键字既可以调用父类的构造函数，也可以在子类方法中调用父类的同名方法，更加直观和安全。

三、子类对父类方法的重写

• ES5：如果子类型要重写父类型的方法，需要直接在子类型的原型上重新定义该方法，可能会覆盖父类型原型上的其他方法，容易产生意外的副作用。
• ES6：可以直接在子类中使用与父类同名的方法来实现重写，并且可以通过 super 关键字方便地调用父类的方法，避免了覆盖父类原型上其他方法的风险。

四、静态方法的继承

• ES5：静态方法的继承需要手动将父类的静态方法复制到子类上。
• ES6：子类可以直接继承父类的静态方法，无需额外的手动操作。例如：

  class Parent {
       
    static staticMethod() {
       
        console.log('Parent static method');
    }
  }
  class Child extends Parent {
       }
  Child.staticMethod(); // 'Parent static method'