es6的class继承和es5的构造函数继承有什么区别

相比于es5 构造函数实现继承,es6 使用 class 实现继承简单多了。

继承父类

JS 构造函数实现继承的代码示例:

// 动物
function Animal() {
  this.eat = function () {
    console.log('animal eat')
  }
} 
// 狗
function Dog() {
  this.bark = function() {
    console.log('dog bark')
  }
}
Dog.prototype = new Animal()
// 哈士奇
var hashiqi = new Dog()

而 ES6 class 是这样实现继承的:

class Animal {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(`${this.name} eat`)
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name)
    this.name = name
  }
  say() {
    console.log(`${this.name} say`)
  }
}
const dog = new Dog('哈士奇')
dog.eat()
dog.say()

ES6 class 使用 extends 即可实现继承,更加符合经典面向对象语言(java)的写法。

要注意,子类的 constructor 一定要执行 super() ,以调用父类的 constructor。