在es6中class可通过关键词extends来实现继承,es5则是修改原型链来实现继承的。
语法部分
代码语言:javascript复制 class universe{
constructor(color){
this.air=color;
}
rotate(){
console.log(this.air)
}
}
class earth extends universe{
constructor(color){
super(color);
super.rotate();
}
}
上述代码有两个类,分别是universe和earth,后者继承前者,这样earth就拥有了universe的属性和方法了。
有一个注意点:就是子类在constructor方法中调用super,super就是父类的构造函数,我们必须先构造父类,才能使用子类。
如果子类不显式声明constructor,那么子类会自动调用,但是如果你自己要显式声明,那么要记住第一件事就是调用super().
只有调用super之后,你才可以使用this和实例化,否则都会报错。
完整部分
代码语言:javascript复制 class universe{
sky=true;
constructor(color){
this.air=color;
}
rotate(){
console.log(this.air)
}
}
class earth extends universe{
constructor(color){
super(color);//调用父类super函数,初始化
super.rotate();//调用父类方法
}
fn1(){
console.log(this.sky);//这里的sky是从父类继承而来的属性
}
}
var earths = new earth("Black-white");
earths.fn1();
这里的代码跟上面的没什么区别,注意看子类中fn1这个函数,他使用了父类的sky属性,注意在子类使用父类的属性时,只能使用this来调用,使用super是找不到的,因为class中的属性都是实例属性。
但是如果是函数,使用this或者super都是可以调用的到,比如在constructor方法中调用了父类的rotate方法,这里使用this.rotate()或者super.rotate()都是可以的,因为函数都是在原型上的。
es5中的继承
es5中的继承则是让某个构造函数的原型对象等于另一个类型的实例,这样实现的继承。
代码语言:javascript复制 function universe(color) {
this.air = color;
this.sky=true;
}
universe.prototype.rotate=function() {
console.log(this.air)
}
function earth() {
console.log(this.air)//使用了父类的属性
}
earth.prototype = new universe("Black-white");//继承
var earths = new earth();
earths.rotate();//使用父类的方法
相信大家都可以看懂,es5的继承就让子类的prototype等于父类的实例,即可完成继承。
相比之下,es6的继承肯定更清晰,而且更方便,不过es6的继承也是通过原型来操作的,只是给我们封装了。
如无作者授权,请勿转载。