class与构造函数

一、基本语法

1.构造函数

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

var ex = new MathHandle(1,2);
console.log(ex.add());

console.log(typeof MathHandle); //function
console.log(MathHandle.prototype.constructor === MathHandle); //true
console.log(ex.__proto__ === MathHandle.prototype); //true

2.class

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

const ex = new MathHandle(1,2);
console.log(m.add());

console.log(typeof MathHandle); //function
console.log(MathHandle.prototype.constructor === MathHandle); //true
console.log(ex.__proto__ === MathHandle.prototype); //true

通过以上最后打印出的结果，可以发现class的原理和构造函数是一样的，class本身就是构造函数的语法糖。

二、继承

1.构造函数

	function Animal(){
		this.eat = function(){
			console.log('Aniaml eat');
		}
	}
	function Dog(){
		this.bark = function(){
			console.log('Dog bark');
		}
	}
	//绑定原型，实现继承
	Dog.prototype = new Animal();

	var cq = new Dog();
	cq.bark();
	cq.eat();

2.class

class Animal{
	constructor(name){
		this.name = name;
	}
	eat(){
		console.log(this.name + ' eat');
	}
}

//Dog继承Animal
class Dog extends Animal{
	constructor(name){
		//注意，只要有extends,constructor中必须先把super写上，super是被继承的class的constructor
		super(name); 
		this.name = name;
	}
	say(){
		alert(this.name + 'say');
	}
}

const cq = new Dog('柴犬');
cq.say();
cq.eat();

三、class和构造函数的区别

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