JavaScript中的继承有哪些方式?各有什么优缺点

在 JavaScript 中,继承主要通过原型链实现,常见的继承方式有以下几种,每种方式都有其优缺点:


1. 原型链继承

1. 实现方式:将子类的原型对象指向父类的实例。

function Parent() {}
function Child() {}
Child.prototype = new Parent();

2. 优点:简单直观,能继承父类原型上的属性和方法。

3. 缺点

(1). 所有子类实例共享父类的引用类型属性,修改一个实例会影响其他实例;

(2). 无法向父类构造函数传递参数,即子类实例化时无法定制父类属性;


2. 构造函数继承

1. 实现方式:在子类构造函数中调用父类构造函数。

function Parent(name) { this.name = name; }
function Child(name) { Parent.call(this, name); }

2. 优点

(1). 解决了引用类型属性共享的问题,使得每个实例独立;

(2). 支持向父类构造函数传递参数;

3. 缺点:无法继承父类原型上的方法,方法只能在构造函数中定义,导致重复创建函数,浪费内存;


3. 组合继承(经典继承)

1. 实现方式:结合原型链继承和构造函数继承;

function Parent(name) { this.name = name; }
function Child(name) { Parent.call(this, name); }
Child.prototype = new Parent();
Child.prototype.constructor = Child;

2. 优点

(1). 既能继承父类实例属性,又能继承父类原型方法;

(2). 引用类型属性不共享,支持传参;

3. 缺点:父类构造函数被调用两次,分别为Parent.call 和 new Parent(),导致子类原型对象中多出一份冗余属性;


4. 原型式继承

1. 实现方式 :基于已有对象创建新对象,类似 Object.create

const parent = { name: "Parent" };
const child = Object.create(parent);

2. 优点:适用于不需要单独构造函数的场景,直接基于对象继承;

3. 缺点:引用类型属性会被所有实例共享,这一点与原型链继承相同;


5. 寄生式继承

1. 实现方式:在原型式继承的基础上增强对象。

function createChild(parent) {const obj = Object.create(parent);obj.sayHi = function() { console.log("Hi"); };return obj;
}

2. 优点:可以在不修改原对象的情况下扩展新方法;

3. 缺点:方法在每次创建实例时重复定义,效率低;


6. 寄生组合式继承(最优解)

1. 实现方式:通过寄生式继承父类原型,避免调用父类构造函数;

function Parent(name) { this.name = name}
function Child(name) { Parent.call(this, name)}Child.prototype = Object.create(Parent.prototype);
prototype.constructor = Child;

2. 优点

(1). 解决了组合继承中父类构造函数被调用两次的问题,性能最优;

​​​​(2). 完美实现原型链继承,且引用类型属性不共享;

3. 缺点:实现稍复杂;


7. ES6 class 继承

1. 实现方式:使用 extends 和 super 关键字;

class Parent {constructor(name) {this.name = name;}
}
class Child extends Parent {constructor(name) {super(name);}
}

2. 优点

(1). 语法简洁,符合传统面向对象语言的写法;

(2). 底层基于寄生组合式继承,是最佳实践的语法糖;

3. 缺点:需要环境支持 ES6+


8. 总结对比

推荐使用:现代开发中优先使用 ES6 class 继承。兼容旧环境时使用 寄生组合式继承。

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

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

相关文章

深入理解指针(3)(C语言版)

文章目录 前言 一、字符指针变量二、数组指针变量2.1 数组指针变量是什么2.2 数组指针变量怎么初始化2.2.1 静态初始化2.2.2 动态初始化 三、二维数组传参的本质四、函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用4.3 typedef关键字4.4拓展 五、函数指针数组六、转…

Linux之 权限提升(Linux Privilege Escalation)

Linux 之权限提升 系统信息 1.获取操作系统信息 2.检查PATH,是否有任何可写的文件夹? 3.检查环境变量,有任何敏感细节吗? 4.使用脚本(DirtyCow?)搜索内核漏洞 5.检查sudo 版本是否存在漏洞…

【leetcode hot 100 215】数组中的第K个最大元素

解法一&#xff1a;维护最大最小值 -> 堆 -> k个元素的最小值堆 class Solution {public int findKthLargest(int[] nums, int k) {// 维护最大最小值 -> 堆 -> k个元素的最小值堆PriorityQueue<Integer> heap new PriorityQueue<>((n1, n2) -> n…

csp信奥赛C++常用的数学函数详解

csp信奥赛C常用的数学函数详解 在信息学奥林匹克竞赛&#xff08;信奥赛&#xff09;中&#xff0c;C 的 <cmath> 头文件提供了丰富的数学函数&#xff0c;用于高效处理数学运算。以下是常用系统数学函数的详细讲解及汇总表格。 绝对值函数 int abs(int x)&#xff1a;返…

Java IntelliJ IDEA 中配置多个 JDK 版本

目录 一、添加多个 JDK 版本1. 下载并安装多个 JDK 版本2. 配置 JDK 在 IntelliJ IDEA 中 二、在项目中切换 JDK 版本1. 设置项目使用的 JDK 版本2. 设置模块使用的 JDK 版本 三、在运行配置中指定 JDK 版本四、总结 在实际开发中&#xff0c;我们常常需要在同一个项目中使用不…

ChatDBA VS DeepSeek:快速诊断 OceanBase 集群新租户数据同步异常

社区王牌专栏《一问一实验&#xff1a;AI 版》改版以来已发布多期&#xff08;51-60&#xff09;&#xff0c;展现了 ChatDBA 在多种场景下解决问题的效果。 下面让我们正式进入《一问一实验&#xff1a;AI 版》第 62 期&#xff0c;看看 ChatDBA 最新效果以及与热门大模型 De…

Java条码与二维码生成技术详解

一、技术选型分析 1.1 条码生成方案 Barbecue是最成熟的Java条码库&#xff0c;支持&#xff1a; Code 128EAN-13/UPC-AUSPS Inteligent Mail等12种工业标准格式 1.2 二维码方案对比 库名称维护状态复杂度功能扩展性ZXing★★★★☆较高强QRGen★★★☆☆简单一般BoofCV★…

air780eq 阿里云

硬件&#xff1a;APM32F030C8 Air 780eq 参考文档&#xff1a; 合宙780E-4G模块通过AT指令连接到阿里云平台&#xff0c;实现信息的收发_air780e上传阿里云属性值at命令-CSDN博客 阿里云 - atair780eq - 合宙文档中心 4G模块接入阿里云-实现数据上传和命令下发_4g模块上传…

oracle数据库(数据库启动关闭/sqlplus登录及基本操作/设置字符集/distinct去重)

目录 1. Oracle数据库启动 2. Oracle数据库关闭 3. sqlplus登录Oracle数据库 3.1 使用sqlplus登录Oracle数据库 3.2 使用sqlplus登录Oracle数据库 3.3 远程登录 3.4 解锁用户 3.5 修改用户密码 3.6 查看当前语言环境 4. sqlplus基本操作 4.1 显示当前用户 4.2 查看当前用户…

Java 大视界 -- Java 大数据在智能金融区块链跨境支付与结算中的应用(154)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

大模型词表注入

大模型词表注入&#xff08;Vocabulary Injection&#xff09; 大模型词表注入&#xff08;Vocabulary Injection&#xff09;是指在预训练语言模型&#xff08;如GPT、LLAMA等&#xff09;的基础上&#xff0c;动态扩展其词表&#xff08;Vocabulary&#xff09;的技术&#…

在Cesium中使用ThreeJs材质(不是场景融合哦)

在Cesium中使用ThreeJs材质(不是场景融合哦&#xff09;_哔哩哔哩_bilibili

初教六双机一飞冲天动作要领

初教六双机一飞冲天动作要领 初教六双机“一飞冲天”是典型的垂直爬升特技动作&#xff0c;要求双机以近乎垂直的姿态同步高速爬升&#xff0c;展现飞机的动力性能与编队协同能力。以下是该动作的详细技术解析与执行要点&#xff1a; 一、动作定义与特点 基本形态 双机以相同速…

给Web开发者的HarmonyOS指南02-布局样式

给Web开发者的HarmonyOS指南02-布局样式 本系列教程适合鸿蒙 HarmonyOS 初学者&#xff0c;为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。 本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。 布局基础对比 在Web开发中&#xff0c;我们使用CS…

京东软件测试岗位经典面试题(附答案)

1、黑盒测试的测试用例常见设计方法都有哪些&#xff1f;请分别以具体的例子来说明这些方法在测试用例设计工作中的应用。 1&#xff09;等价类划分&#xff1a;等价类是指某个输入域的子集合.在该子集合中&#xff0c;各个输入数据对于揭露程序中的错误都是等效的.并合理地假…

3.26[a]paracompute homework

5555 负载不平衡指多个线程的计算量差异显著&#xff0c;导致部分线程空转或等待&#xff0c;降低并行效率。其核心矛盾在于任务划分的静态性与计算动态性不匹配&#xff0c;尤其在处理不规则数据或动态任务时尤为突出。以稀疏矩阵的向量乘法为例&#xff0c;假设其非零元素分…

网站安全专栏-------浅谈CC攻击和DDoS攻击的区别

CC攻击和DDoS攻击都是网络攻击的类型&#xff0c;但它们在攻击方式、目标和效果上有所不同。以下是它们之间的一些主要区别&#xff1a; ### 1. 定义 - **DDoS攻击&#xff08;分布式拒绝服务攻击&#xff09;**&#xff1a; DDoS攻击是指攻击者通过大量的分布式计算机&#x…

帕金森患者的生活重塑:从 “嘴” 开启康复之旅

当提到帕金森病&#xff0c;许多人会联想到震颤、僵硬和行动迟缓等症状。这种神经系统退行性疾病&#xff0c;给患者的生活带来了巨大的挑战。然而&#xff0c;你可知道&#xff0c;帕金森患者恢复正常生活&#xff0c;可以从 “嘴” 开始管理&#xff1f; 帕金森病在全球影响着…

Android14 Settings应用添加有线网开关条目实现

Android14 Settings应用添加有线网开关条目 文章目录 Android14 Settings应用添加有线网开关条目一、前言二、适配修改1、network_provider_settings.xml2、NetworkProviderSettings.java3、TurnOnOffEthernetNetworkController.java4、去除有线网提示条目。5、效果UI&#xff…

Axure RP设计软件中的各种函数:包括数字、数学、字符串、时间及中继器函数,详细解释了各函数的用途、参数及其应用场景。

文章目录 引言函数分类数字函数数学函数字符串函数时间函数函数中继器函数引言 在axure交互设计时,函数可以用在条件公式和需要赋值的地方,其基本语法是用双方括号包含,变量值和函数用英文句号连接。 在交互事件编辑器中通过fx按钮插入函数表达式,例如设置文本内容为: …