前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js中class的继承的基础用法

js中class的继承的基础用法

作者头像
小明爱学习
发布2020-07-22 10:34:12
4.3K0
发布2020-07-22 10:34:12
举报
文章被收录于专栏:smh的技术文章

在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的继承也是通过原型来操作的,只是给我们封装了。

如无作者授权,请勿转载。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年07月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 语法部分
  • 完整部分
  • es5中的继承
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档