JavaScript-构造函数与es6中的class

1、前言

1. Es6中的class语法就是Es5中构造函数的另一种写法，一种更高级的写法，
2. class语法的底层还是es5中的构造函数，只是把构造函数进行了一次封装而已。
3. Es6出现的目的为了让我们的让对象原型的写法更加清晰、更像面向对象编程让JavaScript更加的符合通用编程规范，即大部分语言对于类和实例的写法。

2、 Es5中的构造函数写法

function People(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
}
// 构造一个实例
People.prototype.run=function(){
	console.log('跑步中...')
}
var a = new People;
a.run()  // 跑步中...

 3、Es6中的构造函数写法

①Es6的class基本写法

基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class People {
	constructor(name,sex,age){
		this.name = name;
		this.sex = sex;
		this.age = age;
	}
	run(){
		console.log('唱歌中...');
	}
}
var a = new People;
a.run()   // 唱歌中...

②class注意事项

• 和let一样，ES6的class不允许重复定义；
• 和let一样，class不存在变量提升,需要先定义再使用

4、ES5与ES6的对应关系

• ES5的构造函数Person,对应ES6的Person类的构造方法constructor
• ES5的Person原型上的方法对应Es6的除了constructor以外的其他方法。

5、通过class实现原型链的继承

ES5的继承如下

Fn3的实例继承Fn3的原型--》继承Fn2的原型---》继承Fn1的原型---》Object的原型

function Fn1(){
	this.fn1 = 'fn1';
}
function Fn2(){
	this.fn2 = 'fn2';
}
function Fn3(){
	this.fn3 = 'fn3';
}
// Fn2()继承Fn1()
Fn2.prototype.__proto__ = new Fn1();
// Fn3()继承Fn2()
Fn3.prototype.__proto__ = new Fn2();

ES6的继承如下

class Fn1{
	constructor(){
		this.fn1 = 'fn1';
	}
}

class Fn2 extends Fn1{
	constructor(){
		super();
		this.fn2 = 'fn2';
	}
}

class Fn3 extends Fn2{
	constructor(){
		super();
		this.fn3 = 'fn3';
	}
}

6、继承原理

子类的原型对象的__proto__就是一个父类的实例对象，这样子类实例就能访问父类原型上的方法与属性，父类的原型对象还是Object的一个实例,，所以最终会找到Object的原型对象上去。

如果用es5的语法来实现的话，就可以这样来处理，将父构造函数的实例赋值给子构造函数的原型属性