目录
在之前我们已经分析总结过ES5的继承,这里讲讲ES6中不同的继承方式:
ES6定义类
通过前面的博客总结我们知道ES5中定义类是通过构造函数实现的,那么ES6中定义类是如何实现的呢?
定义方法:
class 类名{
constructor([参数]){ //构造方法:用以初始化对象成员
//方法体
}
}
ES6中定义类通过class关键字来定义一个类,类中定义constructor()构造方法来初始化对象成员,可以定义属性和方法,例如:
//定义类
class person{
constructor(name){
this.name = name; //类中定义属性
}
get(){ //类中定义方法
console.log("姓名:",this.name);
}
}
//创建对象
var p1 = new person("小明"); //创建对象p1
p1.get(); //姓名: 小明
ES6继承
ES6中的继承就是通过类来实现的,通过class定义父类和子类,子类通过extends继承父类,通过super关键字访问和调用对象在父类上的方法(可以调用父类的构造方法,也可以调用父类的普通方法)
//定义父类
class Parent{
constructor(name,gender){
this.name = name;
this.gender = gender;
};
get(){
console.log("姓名:",this.name);
console.log("性别:",this.gender);
}
}
class Child extends Parent{
constructor(name,gender,age){
super(name,gender); //super必须在子类的this之前调用
this.age = age;
}
disp(){
console.log("年龄:",this.age)
}
change(){
console.log(this.name+'的性别是'+this.gender,'今年'+this.age)
}
}
var c1 = new Child('小红','女',20);
c1.get(); //姓名: 小红 性别: 女
c1.disp(); //年龄: 20
c1.change(); //小红的性别是女 今年20
通过上例我们可以发现子类继承了父类的属性和方法,那么父类能不能使用子类的方法呢?我们可以测试一下:
var p1 = new Parent('张三','男',45);
p1.get(); //姓名: 张三 性别: 男
p1.disp(); //TypeError: p1.disp is not a function
很显然,父类不能调用子类的属性和方法,也就是说子类的变化不会影响到父类。
ES6继承和ES5继承区别
1.ES5中的构造函数是一个普通函数,可以使用new关键字调用,也可以直接调用;ES6中的class不能当作普通函数直接调用,必须使用new关键字调用
2.ES5中的原型方法和静态方法默认可枚举,class的默认不可枚举,若想要获取不可枚举属性,可以使用Object.getOwnPropertyNames方法
3.ES5的继承,实质是先创造子类的实例对象this,再执行父类的构造函数向其添加实例方法和属性(也可不执行)。而ES6的继承机制是先创造父类的实例对象this,再用子类的构造函数修改this
4.ES6中,class不存在变量提升,父类必须在子类前定义