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

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

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

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

1. super作为函数

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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用在普通方法中

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

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

=====》对于第一点,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
}
}

=====》对于第二点,如下:(==注意看注释呀!==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
}
}

=====》对于第三点,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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用在静态方法中

  1. super指向父类(不是父类的原型对象)
  2. 在子类的静态方法中通过super调用父类方法时,super内部的this指向子类(不是子类的实例)

=====》对于第一点,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

=====>对于第二点,如下:(==注意看注释呀!==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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,因为构造函数是类的实例。

最后总总结一下~

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

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

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