React (ES6)类的继承 super()方法的由来以及作用

此处类的继承讲解的是ES6的语法以及语义

ES6 的继承机制,是先创造  父类的实例对象,  然后再用    子类的   构造函数     修改。

因此,如果子类中      显式调用    构造方法 constructor(){} ,必须要在子类构造方法中调用 super() 方法。如果不

不调用 super 方法,子类就得不到 this 对象。

这里解释下什么是  显示调用(自己的理解):就是在子类中出现了  构造方法 constructor(){}     这就是所谓的  显示调用     ,整的奇奇怪怪的,让新手很难懂,其实也就那么回事。

接下来,直接上代码:

class Run {
  p() {
    console.log('ppp');
  }
}
class Man extends Run {
  // 显式调用构造方法 
  constructor() { }

  p() {
    alert(1)
  }

  a() {
    alert(2)
  }
}
var m = new Man();
m.p();
m.a();

可以看到,声明了两个类,Run和Man,然后在Run中写了个p方法,Man类继承Run,并显示调用了构造方法,但没有在其中写super方法,然后实例化了Man类,

尝试调用p方法,显示报错

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

显而易见,必须有super方法才能获得this,那么this的作用是啥呢?什么是this呢?这里稍后再说。。。。

先说下,Man类,在这个类中,有个p方法,和a方法,我加p方法的原因是为了尝试用子类的方法覆盖父类的方法,看能不能成功调用,结果是。。报错(就是上面的错误,这和Man没有p方法,然后调用Run的p方法结果是一样的,都报那个错误)

再说说这个a方法,我想着,调用父类的方法,你报错,重写父类的方法你也报错,那调用我自己类(Man)中的方法行不行呢?  结果。。还是那个错误。

如何不出现那个错误呢?

1:不写构造方法

2:不继承

但是,显然这两个解决办法都行不通,因为,这违反了,面向对象的特点,重点是变的麻烦了,所以只好  添上   super方法了。

super方法的作用:

一句话,获取子类this并且获取父类的this,但因为是在子类的构造方法中调用的super方法,所以,父类的this指向子类的this,即都为子类的this。

this的作用:

什么是this,this就是当前类,也可以叫做当前对象。什么是当前类?在Run类   中,this就是类Run,当你实例化Run类时,就得到Run类的对象,此时this就是当前对象。实例化对象其本质是开辟空间,得到指针,指针指向类。简单的来说,类是真实的物体,而,对象是物体的地址。而this的作用就是找到物体的地址,用this调用方法就是先利用地址找到物体,然后并使用物体中的某些功能,这就是this的作用:找到物体的地址,即,得到内存中  指针的  地址,并指向它。

有继承就记得写super方法,有了super()就可以调用父类和子类的方法了。

什么时候有继承但不需要super方法呢?

答:不调用子类中和父类中的方法,子类只是单纯的返回个DOM树,此时该类只是个组件,可以用函数组件代替。

原文地址:https://www.cnblogs.com/zqblog1314/p/12902707.html