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)

结果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot 3.2.5 引入Swagger(OpenApi)

SpringBoot 3.2.5 引入Swagger(OpenApi) pom文件配置文件启动类Controller 层ApiFox题外话 springdoc-openapi 和 swagger 都可以用,用其中一个就行,不用两个都引入。 这里简单记录以下springdoc-openapi。 springdoc-openapi(J…

每日算法之两两交换链表中的节点

题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入:head [1,2,3,4] 输出&…

sheng的学习笔记-AI-支持向量机(SVM)

目录:sheng的学习笔记-AI目录-CSDN博客 目录 什么是向量机 SVM算法原理 SVM基本模型 SVM对偶问题 什么是对偶问题: 为什么使用对偶问题 拉格朗日定理 拉格朗日乘子法 对偶问题算法 非线性SVM算法原理 核函数 常用核函数 软间隔与正则化 软…

RabbitMQ-死信队列

面试题:你们是如何保证消息不丢失的? 1、什么是死信 在 RabbitMQ 中充当主角的就是消息,在不同场景下,消息会有不同地表现。 死信就是消息在特定场景下的一种表现形式,这些场景包括: 1. 消息被拒绝访问&…

教你一分钟快速部署 Llama3 中文大模型

之前百度创始人李彦宏先生曾经说过“开源大模型会越来越落后,闭源模型会持续领先”,但国货表示真的不服,紧接着被扎克伯格同学就给了当头一棒,向他展示了什么叫做顶级开源大模型。那变听我娓娓道来。 美国当地时间4月18日&#x…

使用NGINX做局域网内 浏览器直接访问链接 拓展外网链接访问本地

达成目的功能: 在本地服务的一个文件路径下,局域网内用ip和路径名访问到对应的地址;如 10.5.9.0/v1 即可访问到 某个固定本地地址目录 V1下,名为index.html的文件。前言 NGINX 是一个非常流行的开源 Web 服务器和反向代理服务器…

5分钟梳理银行测试,文末附带实战项目,0经验入行so easy

很多银行招聘都要求有相关从业经验,这对于想跨入这个岗位的0经验从业同学可真犯了难 “你都不让我上岗,我哪来的工作经验呢?” 为了解决这个问题,小编整理了本篇文章,从3个方面介绍银行项目是如何进行测试的 银行的…

思维+线性dp,CF573 B. Bear and Blocks

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 573B - Codeforces 二、解题报告 1、思路分析 本题给的图还是很直…

制糖工业智能工厂数字孪生可视化平台,推进制糖产业数字化转型

制糖工业智能工厂数字孪生可视化平台,推进制糖产业数字化转型。随着信息技术的快速发展,数字化转型已成为各行各业的重要趋势。在糖果加工制造领域,智能工厂数字孪生可视化平台的出现,为行业数字化转型注入了新的活力。 糖果加工制…

应用于智能装备制造,钡铼IOy系列模块展现其强大的灵活性和实用性

随着科技的飞速发展,智能制造已经成为工业4.0时代的核心驱动力。在此背景下,钡铼技术推出的IOy系列模块以其独特的设计、卓越的性能以及无可比拟的灵活性与实用性,在智能装备制造领域展现出了强大的技术优势和应用价值。 首先,钡…

Redis面试题二(数据存储)

目录 1.redis 的数据过期策略 1. 惰性删除(Lazy Expiration) 2. 定期删除(Periodic Expiration) 3. 定时删除(Timing-Based Expiration) 实际应用中的组合策略 2.redis 有哪些内存淘汰机制 volatile&…

Maven解决找不到依赖项

报错如图 方案一&#xff1a;Maven的Setting文件中添加albaba的镜像文件 1.下载maven &#xff1a;Maven – Download Apache Maven 2. 配置镜像 更改成这个&#xff1a; <mirror> <id>alimaven</id> <name>aliyun maven</name> <url&g…

37.WEB渗透测试-信息收集-企业信息收集(4)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;36.WEB渗透测试-信息收集-企业信息收集&#xff08;3&#xff09;-CSDN博客 关于主域名收…

c#学习入门2

十、运算符 1&#xff09;算术运算符是用于数值类型变量计算的运算符&#xff0c;它返回的结果是数值 1.赋值符号 2.算数运算符 加 减- 乘* 除/ 取余% 3.算数运算符的优先级 4.算术运算符的复合运算 5.算术运算符的自增减 2&#xff09;字符串拼接 1.字符串拼接方式1 注意&…

编写一个函数fun,它的功能是:实现两个字符串的连接(不使用库函数strcat),即把p2所指的字符串连接到p1所指的字符串后。

本文收录于专栏:算法之翼 https://blog.csdn.net/weixin_52908342/category_10943144.html 订阅后本专栏全部文章可见。 本文含有题目的题干、解题思路、解题思路、解题代码、代码解析。本文分别包含C语言、C++、Java、Python四种语言的解法完整代码和详细的解析。 题干 编写…

day01黑马头条小bug合集及解决办法

问题1.初始构造heima-leadnews-user这个模块 触发此bug Command line is too long 解决办法&#xff1a; 问题2&#xff1a;构建网关模块启动时 报数据库错误 Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be confi…

电磁仿真--基本操作-CST-(4)

目录 1. 简介 2. 建模过程 2.1 基本的仿真配置 2.2 构建两个圆环体和旋转轴 2.3 切分圆环体 2.4 衔接内外环 2.5 保留衔接部分 2.6 绘制内螺旋 2.7 绘制外螺旋 2.8 查看完整体 2.9 绘制引脚 2.10 设置端口 2.11 仿真结果 3. 使用Digilent AD2进行测试 3.1 进行…

《HCIP-openEuler实验指导手册》1.2Apache主页面配置

一、配置服务器监听IP及端口 注释主配置文件“监听IP及端口”部分 cd /etc/httpd/conf cp httpd.conf httpd.conf.bak vim httpd.conf可以在普通模式下搜索Listen关键字 :/Listen按n键继续向后搜索 在/etc/httpd/conf.d中新建子配置文件port.conf&#xff1a; touch /etc…

QT——简易计算器(从0开始)

目录 一、题目描述&#xff1a; 二、创建工程&#xff1a; 1. ​编辑 2. 3. 4. 默认 5. 6. 7. 8. 默认 9. 创建完成 三、UI界面设计&#xff1a; 1. 添加按钮 1. 2. 按钮界面 3. 按钮绑定快捷键 2. 文本框添加 1. 文本框字体 2. 默认文本 3. 文本对齐方式…

【介绍下IDM的实用功能】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…