Class 和普通构造函数有何区别

JS 构造函数

function MathHandle(x, y) {
    this.x = x
    this.y = y
}

MathHandle.prototype.add = function () {
    return this.x + this.y
}

var m = new MathHandle(1, 2)
// console.log(m.add())

typeof MathHandle  // 'function'
MathHandle.prototype.constructor === MathHandle  // true
m.__proto__ === MathHandle.prototype  // true

继承 - JS

// 动物
function Animal() {
   this.eat = function () {
       alert('Animal eat')
   }
}

// 狗
function Dog() {
   this.bark = function () {
       alert('Dog bark')
   }
}

// 绑定原型，实现继承
Dog.prototype = new Animal()

var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

Class 语法

class MathHandle {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    add() {
        return this.x + this.y
    }
}

const m = new MathHandle(1, 2)

console.log(typeof MathHandle)  // 'function'
console.log(MathHandle.prototype.constructor === MathHandle)  // true
console.log(m.__proto__ === MathHandle.prototype)  // true

继承 - Class

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + ' eat')
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)   // 注意 ！！！
        this.name = name
    }
    say() {
        alert(this.name + ' say')
    }
}

const dog = new Dog('哈士奇')
dog.say()
dog.eat()

综上所述

Class 在语法上更加贴合面向对象的写法
Class 实现继承更加易读、易理解
更易于写 java 等后端语言的使用
本质还是语法糖，使用 prototype