ES6语法中的Class与JS构造函数区别

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()); // 3

如果将上面的代码转换成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(m.add()); //3

下面的代码可以看出Class其实就是个语法糖，形式上与java c#很像

class MathHandle {
	// ...
}
typeof MathHandle // "function"
MathHandle === ManthHandle.prototype.constructor // true

下面来看下JS继承与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() // Dog继承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) //super就是被继承的constructor 必须写上
		this.name = name
	}
	say() {
		console.log(`${this.name} say`)
	}
}
const dog = new Dog('哈士奇')
dog.say() // 哈士奇 say
dog.eat() // 哈士奇 eat

总结

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