1、前言
- Es6中的class语法就是Es5中构造函数的另一种写法,一种更高级的写法,
- class语法的底层还是es5中的构造函数,只是把构造函数进行了一次封装而已。
- 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不存在变量提升,需要先定义再使用
- 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的语法来实现的话,就可以这样来处理,将父构造函数的实例赋值给子构造函数的原型属性