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

Class为普通构造函数的语法糖

//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

//普通构造函数
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

继承

//普通构造函数继承
//动物
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()

//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.say()
dog.eat()

Class在语法上更加贴合面向对象的写法

Class实现继承更加易读、易理解

更易于写java等后台语言的使用

本质还是语法糖，使用prototype