如何实现一个构造函数继承另一个构造函数的属性和方法?给出ES5和ES6两种方式

在 JavaScript 中,构造函数继承可以通过 原型链构造函数调用 实现。以下是 ES5ES6 的实现方式:


ES5 实现方式

关键步骤
  1. 继承实例属性:在子构造函数中调用父构造函数的 call/apply,绑定 this
  2. 继承原型方法:将子构造函数的原型设置为父构造函数的实例,形成原型链。
  3. 修复 constructor:修正子构造函数原型的 constructor 指向自身。
代码实现
// 父构造函数
function Parent(name) {this.name = name; // 实例属性
}
Parent.prototype.sayName = function() { // 原型方法console.log("Parent name:", this.name);
};// 子构造函数
function Child(name, age) {// 1. 继承父构造函数的实例属性Parent.call(this, name); // 绑定 this,传递参数this.age = age;
}// 2. 继承父构造函数的原型方法
Child.prototype = Object.create(Parent.prototype); // 建立原型链// 3. 修复 constructor 指向
Child.prototype.constructor = Child;// 子类新增原型方法
Child.prototype.sayAge = function() {console.log("Child age:", this.age);
};// 测试
const child = new Child("Alice", 10);
child.sayName(); // Parent name: Alice
child.sayAge();  // Child age: 10
关键点
  • Parent.call(this):确保子类实例继承父类的实例属性。
  • Object.create(Parent.prototype):避免直接调用 new Parent()(可能触发父类副作用),仅继承原型方法。
  • 修复 constructor:防止原型链混乱(否则 child.constructor 会指向 Parent)。

ES6 实现方式

ES6 通过 classextends 简化继承,底层依然基于原型链。

代码实现
// 父类
class Parent {constructor(name) {this.name = name; // 实例属性}sayName() { // 原型方法console.log("Parent name:", this.name);}
}// 子类继承父类
class Child extends Parent {constructor(name, age) {super(name); // 必须调用 super(),继承父类实例属性this.age = age;}sayAge() { // 子类原型方法console.log("Child age:", this.age);}
}// 测试
const child = new Child("Bob", 12);
child.sayName(); // Parent name: Bob
child.sayAge();  // Child age: 12
关键点
  • extends:建立原型链,自动继承父类原型方法。
  • super():必须优先调用,相当于 Parent.call(this),负责初始化父类实例属性。
  • 无需手动维护原型链和 constructor:语法糖自动处理。

对比总结

特性ES5ES6
语法手动操作原型链和构造函数调用使用 classextends 语法糖
实例属性继承通过 Parent.call(this)通过 super()
原型方法继承手动设置 Child.prototype = Object.create()自动通过 extends 实现
constructor 修复需手动修正 Child.prototype.constructor自动维护
静态方法继承需手动处理(如 Child.__proto__ = Parent自动继承

注意事项

  1. ES6 的 super
    • 必须在子类 constructor优先调用,否则报错。
    • super 在方法中可调用父类原型方法(如 super.sayName())。
  2. 静态方法继承
    • ES5 中需手动设置 Child.__proto__ = Parent
    • ES6 中通过 extends 自动继承父类的静态方法。

通过 ES5 显式原型链操作ES6 的 class 语法,均可实现构造函数继承。ES6 的语法更简洁且更接近传统面向对象语言,推荐优先使用。

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

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

相关文章

AWS Redshift的使用场景及一些常见问题

Redshift 不是关系型数据库, 提供了Amazon Redshift Serverless 和 Amazon Redshift 都是构建于 Redshift 数仓引擎之上的,但它们适用的场景不同。Redshift和Dynamodb都可以存储数据, 分别怎么选择? 这里记录一些常见的问题和场景。 1. 如何选择用Amazon Redshift…

十五种光电器件综合对比——《器件手册--光电器件》

十五、光电器件 名称 原理 特点 应用 发光二极管(LED) 基于半导体材料的电致发光效应,当电流通过时,电子与空穴复合,释放出光子。 高效、节能、寿命长、响应速度快、体积小。 广泛用于指示灯、照明、显示&#…

Electricity Market Optimization(VI) - 机组组合模型以及 Gurobi 求解

本文参考链接:link \hspace{1.6em} 机组组合问题在电力系统中非常重要,这个问题也是一个优化问题,研究的就是如何调度现有的机组,调度的对象是以煤炭、石油、天然气为燃料的火力发电机以及水力发电机等可预测处理的发电机组&#…

linux多线(进)程编程——(8)多进程的冲突问题

前言 随着时间的推移,共享内存已经在修真界已经沦为禁术。因为使用这种方式沟通的两人往往会陷入到走火入魔的状态,思维扭曲。进程君父子见到这种情况,连忙开始专研起来,终于它们发现了共享内存存在的问题: 进程间冲…

网络层IP协议知识大梳理

全是通俗易懂的讲解,如果你本节之前的知识都掌握清楚,那就速速来看我的IP协议笔记吧~ 自己写自己的八股!让未来的自己看懂! (全文手敲,受益良多) 网路基础3 网路层 TCP并没有把数据发到网路…

数据结构与算法学习导航

目录 指导思想资料总结代码随想录hello-algoOI-WIKI 一名麻瓜的刷leetcode的简单概述。 在这里对过去的自己说: 如果你相信算法有用你就刷刷leetcode,如果不相信面试会让你相信。 当然,现在我确实认为算法和数据结构有用,leetcode也有用。 …

【网络安全】谁入侵了我的调制解调器?(二)

文章目录 针对 TR-069 协议 REST API 的攻击思路攻击百万台调制解调器意外发现 Cox 后端 API 的授权绕过漏洞确认我们能够进入任何人的设备访问和更新任何Cox商业客户账户通过泄露的加密密钥覆盖任何人的设备设置执行对任何调制解调器的命令影响最后想说阅读本文前,请先行浏览…

大模型在急性单纯性阑尾炎预测及治疗方案制定中的应用研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的 1.3 研究方法与创新点 二、急性单纯性阑尾炎概述 2.1 定义与发病机制 2.2 临床表现 2.3 传统诊断方法 三、大模型在急性单纯性阑尾炎预测中的应用 3.1 大模型简介 3.2 数据收集与处理 3.3 模型训练与优化 3.4 预测…

Linux 上安装和配置 VNC 远程桌面

在 Linux 上安装和配置 VNC(Virtual Network Computing)可以让你远程访问图形化桌面环境。以下是详细的安装和配置步骤,适用于主流 Linux 发行版(如 Ubuntu、CentOS、Debian 等)。 1. 安装 VNC 服务器 Ubuntu/Debian …

《AI大模型应知应会100篇》第22篇:系统提示词(System Prompt)设计与优化

第22篇:系统提示词(System Prompt)设计与优化 摘要 在大语言模型(LLM)应用中,系统提示词(System Prompt)是控制模型行为的核心工具之一。它不仅定义了模型的身份、角色和行为规范,还直接影响输…

其他网页正常进入,但是CSDN进入之后排版混乱

显示不正常,排版混乱 解决方法: ①打开网络设置 ②更改适配器 ③所连接的网络 --右键 属性 然后就可以正常访问了。

Qwen2.5-VL视觉大语言模型复现过程,没碰到什么坑

视频讲解:Qwen2.5-VL视觉大语言模型复现过程,没碰到什么坑_哔哩哔哩_bilibili Qwen2.5-VL视觉大语言模型复现过程,没碰到什么坑 今天复现下Qwen2.5-VL玩玩 https://github.com/QwenLM/Qwen2.5-VL 创建conda环境,实测22.04&#x…

宫庭海:跨界融合与家国情怀的影视开拓者

从音乐经纪人到影视多面手的创业之路 近日,国内娱乐产业领军人物、著名音乐经纪人、制片人、影视投资人宫庭海先生再次受到广泛关注。凭借其卓越的成就和贡献,宫庭海先生在业界树立了良好的口碑和广泛的影响力。 宫庭海, 辽宁省大连市人&…

LeetCode算法题(Go语言实现)_51

题目 给你两个下标从 0 开始的整数数组 nums1 和 nums2 ,两者长度都是 n ,再给你一个正整数 k 。你必须从 nums1 中选一个长度为 k 的 子序列 对应的下标。 对于选择的下标 i0 ,i1 ,…, ik - 1 ,你的 分数 …

并查集(力扣2316)

这种涉及不同连通分量的,看上去就可以用并查集。并查集的模板请参见上一篇内容。并查集(力扣1971)-CSDN博客 现在我们要求的是无法互相到达的点对。根据观察易得,我们只需要求出每个并查集的元素数量,然后遍历每个点&…

Python在生成艺术中的创新应用

Python在生成艺术中的创新应用 在数字艺术的浪潮中,Python以其强大的库支持和简洁的语法,成为了生成艺术领域的一颗璀璨明珠。今天,就让我们一起踏上这段充满创意与惊喜的旅程,探索Python如何在生成艺术中大放异彩。 一、引言 生成艺术,是一种通过算法自动生成艺术作品的…

ROS ROS2 机器人深度相机激光雷达多传感器标定工具箱入门教程(一)

系列文章目录 目录 系列文章目录 前言 一、安装 1.1 ROS 2 官方软件包 二、教程 2.1 标定配置器 2.1.1 机器人选项 2.1.2.1 外参相机-激光雷达标定 2.1.2.2 外参激光雷达-激光雷达标定 2.1.2.3 外参相机参照标定 2.1.2.4 外参激光雷达-参考标定 2.2 外参照相机-激…

Ubuntu利用docker搭建Java相关环境问题记录

Docker拉取镜像超时 报错 Unable to find image dpanel/dpanel:latest locally docker: Error response from daemon: Get "https://registry-1.docker.io/v2/ ": context deadline exceeded (Client.Timeout exceeded while awaiting headers)解决方式 在etc/do…

list的模拟实现和反向迭代器的底层

1&#xff1a;list的模拟实现 1&#xff1a;链表的节点 对于list的模拟实现&#xff0c;我们需要先定义一个节点的类可以使用&#xff08;class也可以使用struct&#xff09; // List的节点类 template<class T> struct ListNode {ListNode(const T& val T()){_p…

数据加载与保存

通用方式‌ SparkSQL提供了通用的数据加载方式&#xff0c;使用spark.read.loa方法&#xff0c;并可通过format指定数据类型&#xff08;如csv、jdbc、json、orc、parquet、textFile&#xff09;。 load方法后需传入数据路径&#xff08;针对csv、jdbc、json、orc、parquet、…