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

   2023-03-08 学习力0
核心提示:ES6 的继承机制,是先创造  父类的实例对象,  然后再用    子类的   构造函数     修改。因此,如果子类中      显式调用    构造方法 constructor(){} ,必须要在子类构造方法中调用 super() 方法。如果不不调用 super 方法,子类就得不到 th

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树,此时该类只是个组件,可以用函数组件代替。

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React实现基于Antd密码强度校验组件示例详解
    React实现基于Antd密码强度校验组件示例详解
    目录引言效果预览组件思想组件开发引言最近在开发 Nest 和 Umi 技术栈的个人项目,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!效果预览组件思想既然是密码强度校验,那么强度就必须有个梯度,这
    03-16
  • 03 React快速入门(三)——实现从一个输入框中添加完数据后此输入框内容清除的功能
    03 React快速入门(三)——实现从一个输入框中
    功能描述:      我们在一个输入框输入内容,然后点击添加按钮,此输入框的内容就会添加到页面上,但是此输入框中还存在上次输入的内容,我们想在每次输入添加完成之后,此输入框中的内容就会清除,如图:   实现思路:      我们可以先在输入框上定
    03-08
  • react编译器jsxTransformer,babel
    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展。2.编译器——jsxTransformerJSX代码并不能直接运行,需要将它编译成正常的JavaScript表达式才能运行,jsxTransformer.js就是这一编
    03-08
  • G2( bizCharts ) React 绘制混合图例
    G2( bizCharts ) React 绘制混合图例
     G2( bizCharts ) React 绘制混合图例,// data-set 可以按需引入,除此之外不要引入别的包import React from 'react';import { Chart, Axis, Tooltip, Geom, Legend, Label } from 'bizcharts';import DataSet from '@antv/data-set';// 下面的代码会被作为
    03-08
  • React-多页面应用 react怎么写页面
    React-多页面应用 react怎么写页面
    1初始化项目npm init create-react-app my-app2.修改indeximport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';ReactDOM.render(App /, document.getElementById('root')
    03-08
  • react-native start 启动错误解决方法
    ERRORError watching file for changes: EMFILE{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}Error: Error watching file for changes: EMFILE
    03-08
  • React兄弟组件通信(发布者-订阅者模式)
    // eventProxy.js'use strict';const eventProxy = {onObj: {},oneObj: {},on: function(key, fn) {if(this.onObj[key] === undefined) {this.onObj[key] = [];}this.onObj[key].push(fn);},one: function(key, fn) {if(this.oneObj[key] === undefined) {thi
    03-08
  • React笔记_(7)_react路由 react路由配置
    路由路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联。那么react的路由到底指的是什么呢?举个栗子~~~在网页中点击后,从A页面跳到B页面,跳转过程中url发生变
    03-08
  • react-native关闭所有黄色警告 react native st
     将以下这两句话加在index.js(入口文件)中,放在AppRegistry.registerComponent('App', () = App)之前即可1 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty str
    03-08
  • react中style的写法 react styles
    div style={{width: 20px; height=30px}}style的写法/div 
    03-08
点击排行