class的继承之super的使用

xinxin-l

发布于 2022-03-30 16:08:21

7930

发布于 2022-03-30 16:08:21

文章被收录于专栏：xinxin的随笔记录

我们大家都知道，在class的继承中，子类如果想要继承父类且能生成子类实例，就必须要在constructor中调用super()，那么super在此处到底代表什么呢？除了这个用法，super还有别的用法吗？

接下来我们就来捋一捋super的用法吧~

首先，super既可以当函数使用，也可以当对象使用

这是很重要的，我们需要记住，当你需要引用super时，你要想清楚在此处super是函数还是对象，所以当你直接console.log(super)时会报错，因为你没有指定super是什么

1. super作为函数

super作为函数在子类的constructor中调用时，代表的是父类的构造函数。但是，虽然super代表的是父类的构造函数，但它内部的this指向的是当前子类的构造函数，见如下例子。


class A{
    constructor() {
        console.log(new.target.name)
    }
}
class B extends A{
    constructor() {
        super();//其内部的this指向的是子类B的构造函数
    }
}
new A()//A
new B()//B

并且要记住，super作为函数只能用在子类的构造函数中。

2. super作为对象

super作为对象用在子类中，我们仍然需要加以区分super是用在子类的普通方法还是静态方法中。

super用在普通方法中

super指向父类的原型对象
通过super调用父类方法时，super内部的this指向子类的实例
当通过super为子类属性赋值时，super就是this

上面的三点每一点都很关键，会与在静态方法中的使用形成对比

=====》对于第一点，如下：

class C{
    constructor() {
    }
}

C.cc=7;
C.prototype.cc=100;

class D extends C{
    constructor() {
        super();
        console.log(super.cc + " and I am in D")//100
    }
}

=====》对于第二点，如下：（==注意看注释呀！==

class C{
    constructor() {
        this.x=11;
    }
    fun(){
        this.x=3;
    }
    print(){
        console.log(this.x)
    }
}

class D extends C{
    constructor() {
        super();
        this.x=90;
    }
    f(){
        super.fun();
        this.x=5;
        super.print();//5  
        敲黑板！！！
        如果此处没有this.x=5 则返回的是3，如果没有3，返回的是90，没有90，返回11
    }
}

=====》对于第三点，如下：

class C{
    constructor() {
    }
}

class D extends C{
    constructor() {
        super();
    }
    e(){
        super.e=20;//这里的super是this
        console.log(super.e)//这里的super指向的是父类的原型对象 undefined
        console.log(this.e)//20
    }
}

super用在静态方法中

super指向父类（不是父类的原型对象）
在子类的静态方法中通过super调用父类方法时，super内部的this指向子类（不是子类的实例）

=====》对于第一点，如下：

class E{
    constructor() {
    }
    static fun(){
        console.log("我是父类的fun")
    }
    fun(){
        console.log("我是父类原型对象的fun")
    }
}

class F extends E{
    constructor() {
        super();
    }
    static son(){
        super.fun();//此时指向的是父类的fun  即静态fun
    }
    son(){
        super.fun();//此时指向的是父类的原型对象  即普通fun
    }
}
let ff=new F()
F.son()//我是父类的fun
ff.son()//我是父类原型对象的fun

=====>对于第二点，如下：（==注意看注释呀！==

class E{
    constructor() {
        this.x=2;
    }
    static print(){
        console.log(this.x)
    }
}

class F extends E{
    constructor() {
        super();
        this.x=4;
    }
    static p(){
        this.x=8;  如果此处没有this.x=8，则F.p()的执行会是11
              如果F.x=11也没有，则输出undefined，不会输出构造函数中的2
        super.print();
    }
}
let ff=new F()
F.x=11
F.p()

在上面两个关于x值的例子中，在普通方法中调用super时，若在子类和父类的方法中都未指定x的值，构造函数中的x值会被访问到；但是在静态方法中并不会，它会返回undefined，因为构造函数是类的实例。