super与this

目录

  • 原型链与继承
    • 继承中的原型链
  • class
  • super与this

我们可能会对一个问题感到好奇:为什么在派生类中,我们需要在调用this之前调用super。我们通常将其视为一种规范,却很少深入探究这个规范的真正意义。许多人认为super不过是ES6之前继承方式的语法糖。但实际上,这种看法是不准确的。要真正理解super的必要性,我们必须探究JavaScript中继承机制的内部工作原理

原型链与继承

JavaScript中,继承的实现本质上是通过原型链的查找机制来完成的。这个过程涉及将一个类(如Person)的实例作为另一个类(如Student)的原型。这样,Student类实例就能够访问Person类的属性和方法,从而实现继承

class Person {
}
class Student extends Person {
}
const p1 = new Student()
const p2 = new Person()
console.log(p1)
console.log(p2)

我们观察一下p1和p2的原型链
原型链
我们先来观察一下p2的原型链关系,因为p2是直接通过new Person得到的,Person是基类,所以不存在继承关系,p2.__proto__直接指向了Person.prototypePerson.prototype.__proto__直接指向了Object.prototypeObject.prototype.__proto__直接指向了null

原型图

继承中的原型链

再看看p1的原型链,因为p1通过new Student得到,,所以p1.__proto__Student.prototype,而Student继承了Person,所以Student.prototype.__proto__指向了Person.prototype

原型链

粗看似乎和Person的原型链并没有什么不同,但仔细观察就会发现Student.__proto__指向了Person自身,即指向了Person.prototype.constructor,这一点似乎与我们之前在ES5实现的继承并不相同

class

那么,为什么class中的继承与ES5中的继承不一致呢
我们知道,在class中如果使用了extends就需要在constructor中调用super方法,而且必须在派生类构造方法返回前且访问this前调用

在面向对象编程语言中,继承机制通常首先确保父类的构造函数被正确调用以初始化this对象,然后这个this对象会被传递给子类。这种做法被认为是更安全的

相比之下,在ES5及之前的JavaScript版本中,继承可以通过借用构造函数组合寄生继承实现,这些方式允许开发者选择是先调用父类构造函数还是子类构造函数。这种灵活性使得JavaScriptES6引入class关键字之前,虽然具有对象构造的能力,但并不完全符合传统意义上的面向对象编程语言的规范

super与this

那么回到我们最开始的问题 ,为什么派生类在调用super前不能访问this
我们可以认为,在ES6中,ECMA委员会对类的继承机制进行了调整,从直接由子类发出this给父类的情况变为了从父类发出this并依次传递到子类,我们可以合理认为super本身是有返回值的,而这个返回值就是this,所以我们可以进一步得出子类的this是由父类得到的,所以在访问this前必须调用super

let obj = null
class Person {constructor() {this.name = "person"}getName() {return this.name}
}
class Student extends Person {constructor() {obj = super()console.log(obj === this)}
}
const p1 = new Student()
console.log(p1 === obj)

结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/4156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python作业 切片逆转

题目: (反转显示一个整数)编写下面的函数,反向显示一个整数。 列如:reserse(3456)。编写一个测试程序,提示用户输入一个整数,然后显示它的反向数。 第一步定义一个函数: def rev…

【前端开发基础知识快速入门】

前端开发基础知识&快速入门 一、VSCode 使用1.1 安装常用插件1.2 创建项目1.3 创建网页1.4 运行效果二、ES62.1 简介2.2 什么是 ECMAScript2.3 ES6 新特性2.3.1 let 声明变量2.3.2 const 声明常量(只读变量)2.3.3 解构表达式2.3.4 字符串扩展2.3.5 函数优化2.3.6 对象优化…

【C语言】动态内存分配(一)

目录 1.为什么要有动态内存分配 2.malloc和free 2.1malloc 2.2free 1.为什么要有动态内存分配 我们已经掌握的内存开辟方式有: 但是上述的开辟空间的方式有两个特点: ⭐空间开辟大小是固定的。 ⭐数组在申明的时候,必须指定数组的长度,数组空间一旦…

OpenCV C++实现区域面积筛选以及统计区域个数

目录 1、背景介绍 2、代码实现 2.1 获取原图 2.1.1 区域图像imread 2.1.2 具体实现 2.2 获取图像大小 2.3 阈值分割 2.3.1 阈值分割threshold 2.3.2 具体实现 2.4 区域面积筛选 2.4.1 获取轮廓findContours 2.4.2 获取轮廓面积contourArea 2.4.3 填充区域fil…

浅谈大数据时代下的电商风控||电商数据API接口

抢抢抢!最后1天,双十一直播活动来啦!抢直播专属优惠…… 视频号 随着大数据时代的兴起,互联网电商风控已经从无风控、人工抽取规则为主的简易规则模型发展到当前基于大数据的风控。与金融风控不同,互联网电商风控呈现出…

vscode中jsconfig.json文件首行提示错误

在使用react框架开发前端时,文件jsconfig.json首行提示错误,打开设置,勾选如下图这项

Linux 第十一章

🐶博主主页:ᰔᩚ. 一怀明月ꦿ ❤️‍🔥专栏系列:线性代数,C初学者入门训练,题解C,C的使用文章,「初学」C,linux 🔥座右铭:“不要等到什么都没有了…

Java 图形化框架 - AWT、Swing

文章目录 关于 AWTAWT继承体系 关于 Swing关于 JFC 和 Swing Swing 组件组件层次Swing组件和AWT组件的对应关系:Swing组件按照功能来分类: Java使用AWT和Swing相关的类可以完成图形化界面编程,其中AWT的全称是抽象窗口工具集(Abstract Window…

北大发现了一种特殊类型的注意力头!

检索头的发现或许将有力地帮助大模型领域在提高长上下文推理能力、减少幻觉和压缩KV缓存方面的研究。 从 Claude100K 到 Gemini10M,我们正处于长上下文语言模型的时代。如何在长上下文中利用任何输入位置的信息?北大联合另外四所高校发现了一种特殊类型…

运维 kubernetes(k8s)基础学习

一、容器相关 1、发展历程:主机–虚拟机–容器 主机类似别墅的概念,一个地基上盖的房子只属于一个人家,很多房子会空出来,资源比较空闲浪费。 虚拟机类似楼房,一个地基上盖的楼房住着很多人家,相对主机模式…

微信小程序的开发

1.了解项目的基本组成结构 pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块(例如:格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序项目的全局配置文件 app.wxss 小程序项目的全局样式文件 project.config.json 项目的配置文件 sitem…

Docker基础学习(5.Docker镜像命令)

⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容:个人博客系统 ⭐我的文档网站:http://xyhwh-nav.cn/ ⭐微信公众号:码上言 文章目录 Docker run流程镜像是什么&a…

通用视觉多模态大模型 一统理解/生成/分割/编辑

这是一款通用视觉多模态大模型,支持从视觉理解到视觉生成、从低层次到高层次的一系列视觉任务,解决了困扰大语言模型产业已久的图像/视频模型割裂问题,提供了一个全面统一静态图像与动态视频内容的理解、生成、分割、编辑等任务的像素级通用视…

C++必修:类与对象(一)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯,先赞后看哦~🎈🎈 所属专栏:C学习 贝蒂的主页:Betty’s blog 1. 面向过程与面向对象 1.1. 面向过程 我们之前学习的C语言就是一种面向过程的语…

【网络通信】初探网络层次结构(OSI七层网络模型)

随着信息技术的飞速发展,网络通信已经成为现代社会不可或缺的一部分。网络通信的实现离不开网络协议栈的支持,而网络协议栈则是由多个层次组成的。这些层次各自承担着不同的任务,共同构成了网络通信的基石。本文将对网络通信中的各类层进行详…

Swift - 函数

文章目录 Swift - 函数1. 函数的定义2. 隐式返回(Implicit Return)3. 返回元组:实现多返回值4. 函数的文档注释5. 参数标签(Argument Label)6. 默认参数值(Default Parameter Value)7. 可变参数(Variadic P…

LM2576D2TR4-5G 3.0安15伏降压开关稳压器 PDF中文资料_参数_引脚图

LM2576D2TR4-5G 规格信息: 制造商:ON Semiconductor 产品种类:开关稳压器 RoHS:是 装置风格:SMD/SMT 封装 / 箱体:TO-263-5 输出电压:5 V 输出电流:3 A 输出端数量:1 Output 最大输入电压:45 V 拓扑结构:Buck 最小输入电压:7 V 开关频率:52 kHz 最小工作…

seq2seq架构略解

用于序列翻译任务&#xff08;下图来自d2l&#xff09; 训练时输入输出格式&#xff1a; 若数据集为{ <(a1,a2,a3,a4,a5),(b1,b2,b3,b4,b5)> }&#xff08;AB语言对应的句子组&#xff09; 输入 A语言的单词序列结束符&#xff08;a1,a2,a3,a4,a5,<eos>&#xf…

Unity类银河恶魔城学习记录14-5 p152 Lost currency save and enemy‘s currency drop

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili LostCurrencyController.cs using System.Collections; using System.Colle…

【STM32+HAL】三轴按键PS2摇杆

一、准备工作&#xff1a; 有关CUBEMX的初始化配置&#xff0c;参见我的另一篇blog&#xff1a;【STM32HAL】CUBEMX初始化配置 有关定时器触发ADC模式配置&#xff0c;详见【STM32HAL】ADC采集波形实现 二、所用工具&#xff1a; 1、芯片&#xff1a; STM32F407VET6 2、CUBE…