js中class的继承的基础用法
在es6中class可通过关键词extends来实现继承，es5则是修改原型链来实现继承的。
语法部分
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和实例化，否则都会报错。
完整部分
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中的继承则是让某个构造函数的原型对象等于另一个类型的实例，这样实现的继承。
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的继承也是通过原型来操作的，只是给我们封装了。
如无作者授权，请勿转载。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年07月20日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录