【javascript】class的继承之super的使用

我们大家都知道，在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是thisconsole.log(super.e)//这里的super指向的是父类的原型对象 undefinedconsole.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，不会输出构造函数中的2super.print();}
}
let ff=new F()
F.x=11
F.p()

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

最后总总结一下~

super作为函数使用，代表父类的构造函数，只能用在子类的构造函数中；

super作为对象使用，在普通方法之中指向父类的原型对象，在静态方法之中指向父类；在普通方法中调用父类方法，super内部的this指向子类的实例，在静态方法中指向子类。

实践是最好的证明哦，大家可以比对上面的代码，自己去探索super的用法呀~