js中class的继承的基础用法

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

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

评论区:

昵称:
内容:
验证码:  8979

QQ群:477600139

今日头条:前端开发梦工厂

腾讯云社区:小明爱学习

微信公众号:霓虹国的佛系少年