JavaScript 中的五种继承方式进行深入对比

news2025/5/20 19:11:30

文章目录

  • 前言
  • JavaScript 五种继承方式对比
    • 原型链继承
    • 构造函数继承
    • 组合继承
    • 寄生组合继承
    • ES6 class extends 继承
    • 五种继承方式对比表


前言

对 JavaScript 中的五种继承方式进行深入对比:原型链继承、构造函数继承、组合继承、寄生组合继承、以及 ES6 的 class extends。

内容将包括:

  • 每种方式的定义与核心原理
  • 示例代码
  • 优点与缺点分析
  • 应用场景与现代推荐

我整理好结构化的对比表格与说明文档后会立即通知你查看。

JavaScript 五种继承方式对比

JavaScript 的继承机制本质上是通过“原型链”将父类和子类关联起来。在 ES6 出现之前,开发者总结出了多种继承的经典实现方式,包括原型链继承构造函数继承组合继承寄生组合继承,以及 ES6 引入的 class extends 继承。下面将逐一分析这五种继承方式的实现原理、示例代码、优缺点(围绕属性共享、方法复用、实例隔离等方面),并给出适用场景建议。最后,我们提供一个对比表格,清晰展示这些方式在语法复杂度、性能、兼容性和多继承支持方面的差异。

原型链继承

实现原理与机制: 将子类的原型对象指向父类的一个实例,从而使子类实例的原型链上含有父类实例和父类的原型。这样,子类实例在访问属性或方法时,如果自身不存在,会沿着原型链在父类实例以及父类原型上查找,从而继承父类的属性和方法。

示例代码: 子类的原型指向父类实例,实现继承。注意此方式不调用父类构造函数,因此不能传参,也不会为每个子实例单独初始化父类属性。

function Parent() {
   
  this.name = "Parent";
  this.colors = ["red", "blue"];    // 引用类型属性
}
Parent.prototype.getName = function() {
   
  console.log("Name: " + this.name);
};

function Child() {
   
  this.name = "Child";
}
// 子类原型指向父类实例,实现原型链继承
Child.prototype = new Parent();
Child.prototype.constructor = Child;  // (可选)修正constructor指向

const child1 = new Child();
const child2 = new Child();
child1.colors.push("green");  
console.log(child1.colors, child2.colors);  // 输出: ["red","blue","green"] ["red","blue","green"] 
// 两个实例的 colors 引用同一个数组,修改一个会影响另一个
child1.getName();  // 输出: Name: Child
console.log(child1.getName === child2.getName);  // 输出: true (方法共享)

优点:

  • 子类通过原型链可以访问父类原型上的所有属性和方法,实现方法复用,共享父类的功能。如果父类原型新增方法/属性,子类实例也能访问到,维护成本低。
  • 实现简单,只需一行设置原型链,符合 JavaScript 原型继承的直观模型。

缺点:

  • 无法传参: 在创建子类实例时不能向父类构造函数传递参数(因为根本没有调用父构造函数)。每个子类实例无法定制父类初始化过程。
  • 引用属性共享: 父类构造函数里的引用类型属性(如数组、对象)会被所有子类实例共享,因为这些属性存在于同一个父类实例(即子类的原型对象)上。这导致实例不隔离 —— 一个实例修改了这些共享属性,会影响其他实例。上例中两个子实例的 colors 就指向同一数组。
  • 父类构造函数未在子类实例上执行,子类实例可能缺少父类构造函数中初始化的各自独立的属性值。如需每个实例拥有自己的副本,则无能为力。

适用场景: 原型链继承在需要共享方法且父类仅包含方法或静态属性时有用。但由于无法传参且存在引用属性共享问题,实际开发中很少单独使用。若父类含需单独初始化的属性(特别是引用类型),应考虑其他继承方式或在继承后手动屏蔽/重写这些属性。

构造函数继承

实现原理与机制: 在子类构造函数内部调用父类构造函数(通常使用 Parent.call(this, ...)apply),并将子类实例的 this 绑定给父类构造函数。这样,父类构造函数中定义的属性都会添加到子类实例上,实现对父类属性的继承。这种方式又称“借用构造函数”继承。

示例代码: 子类构造函数内部借用父类构造函数。由于没有建立原型链关系,父类原型方法不会自动继承下来。

function Parent(name) {
   
  this.name = name;
  this.colors = ["red", "blue"];  // 引用类型属性
}
Parent

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

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

相关文章

企业标准信息公共服务平台已开放标准通编辑器访问入口

标准通 数字化标准编辑器 专业、高效、便捷 企业标准信息公共服务平台 近日,企业标准信息公共服务平台已开放标准通编辑器访问入口,可进入官网指定版块使用! 核心功能亮点 解决企业痛点 传统标准编制,需反复核对格式、逐条…

进阶-数据结构部分:1、数据结构入门

飞书文档https://x509p6c8to.feishu.cn/wiki/HRLkwznHiiOgZqkqhLrcZNqVnLd 一、存储结构 顺序存储 链式存储 二、常用数据结构 2.1、栈 先进后出 场景: 后退/前进功能:网页浏览器中的后退和前进按钮可以使用栈来实现。在浏览网页时,每次…

React 19中useContext不需要Provider了。

文章目录 前言一、React 19中useContext移除了Provider&#xff1f;二、使用步骤总结 前言 在 React 19 中&#xff0c;useContext 的使用方式有所更新。开发者现在可以直接使用 作为提供者&#xff0c;而不再需要使用 <Context.Provider>。这一变化简化了代码结构&…

Json schema校验json字符串(networknt/json-schema-validator库)

学习链接 json-schema官网 - 英文 jsonschemavalidator 可在线校验网站 networknt的json-schema-validator github地址 networknt的json-schema-validator 个人gitee地址 - 里面有md文档说明和代码示例 JSON Schema 入门指南&#xff1a;如何定义和验证 JSON 数据结构 JS…

交易所开发:构建功能完备的金融基础设施全流程指南

交易所开发&#xff1a;构建功能完备的金融基础设施全流程指南 ——从技术架构到合规安全的系统性解决方案 一、开发流程&#xff1a;从需求分析到运维优化 开发一款功能完备的交易所需要遵循全生命周期管理理念&#xff0c;涵盖市场定位、技术实现、安全防护和持续迭代四大阶…

Axure疑难杂症:统计分析页面引入Echarts示例动态效果

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题:统计分析页面引入Echarts示例动态效果 主要内容:echart示例引入、大小调整、数据导入 应用场景:统计分析页面…

展锐Android14及更新版本split_build编译方法

更改split_build.py文件内容后按照下面方法编译&#xff1a; zip -r sys/vendor/sprd/release/split_build.zip sys/vendor/sprd/release/split_build/ rm -r sys/vendor/sprd/release/split_build/ cp -r vnd/vendor/sprd/release/split_build/ sys/vendor/sprd/release/cd s…

青少年ctf平台应急响应-应急响应2

题目&#xff1a; 当前服务器被创建了一个新的用户&#xff0c;请提交新用户的用户名&#xff0c;得到的结果 ssh rootchallenge.qsnctf.com -p 30327 这个命令用于通过 SSH 协议连接到指定的远程服务器。具体解释如下&#xff1a; ssh&#xff1a;这是在 Unix-like 系统中…

k8s监控方案实践补充(二):使用kube-state-metrics获取资源状态指标

k8s监控方案实践补充&#xff08;二&#xff09;&#xff1a;使用kube-state-metrics获取资源状态指标 文章目录 k8s监控方案实践补充&#xff08;二&#xff09;&#xff1a;使用kube-state-metrics获取资源状态指标一、Metrics Server简介二、kube-state-metrics实战部署1. 创…

基于SpringBoot的小型民营加油站管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

技术架构缺乏灵活性,如何应对变化需求?

技术架构缺乏灵活性会导致企业在面临市场变化、用户需求演化或新技术出现时难以及时响应&#xff0c;直接影响产品更新速度与竞争力。要有效应对变化需求&#xff0c;需要从引入模块化架构设计、推动微服务拆分、加强架构治理与决策机制、构建中台与平台化能力等方面系统推进。…

【AI时代】Java程序员大模型应用开发详细教程(上)

目录 一、大模型介绍 1. 大模型介绍 1.1 什么是大模型 1.2 技术储备 1.3 大模型的分类 2. 入门案例 3.Token的介绍 二、提示词工程 1. 好玩的提示词案例 1.1 翻译软件 1.2 让Deepseek绘画 1.3 生成数据 1.4 代码生成 2. 提示词介绍 3. Prompt Engineering最佳实…

虚拟网络编辑器

vmnet1 仅主机模式 hostonly 功能&#xff1a;虚拟机只能和宿主机通过vmnet1通信&#xff0c;不可连接其他网络&#xff08;包括互联网&#xff09; vmnet8 地址转换模式 NAT 功能&#xff1a;虚拟机可以和宿主通过vmnet8通信&#xff0c;并且可以连接其他网络&#xff0c;但是…

第31讲 循环缓冲区与命令解析

串口在持续接收数据时容易发生数据黏包&#xff08;先接收的数据尚未被处理&#xff0c;后面的数据已经将内存覆盖&#xff09;的情况&#xff0c;循环缓冲区的本质就是将串口接受到的数据马上拷贝到另外一块内存之中。为了避免新来的数据覆盖掉尚未处理的数据&#xff0c;一方…

数据结构(十)——排序

一、选择排序 1.简单选择排序 基本思想&#xff1a;假设排序表为[1,…,n]&#xff0c;第i趟排序即从[i,…,n]中选择关键字最小的元素与L[i]交换 eg&#xff1a;给定关键字序列{87&#xff0c;45&#xff0c;78&#xff0c;32&#xff0c;17&#xff0c;65&#xff0c;53&…

美蛋工具箱:一站式解决图片、视频、音频和文档处理需求的聚合神器

先放下载链接:夸克网盘下载 宝子们&#xff0c;今天不啰嗦&#xff0c;直接给大家安利一款超好用的聚合工具&#xff0c;有需要的小伙伴赶紧码住&#xff01; 今天要介绍的这款工具叫美蛋工具箱&#xff0c;它是一款聚合类工具。这个软件是绿色版的&#xff0c;聚合了图片工具…

python打卡day16

NumPy 数组基础 因为前天说了shap&#xff0c;这里涉及到数据形状尺寸问题&#xff0c;所以需要在这一节说清楚&#xff0c;后续的神经网络我们将要和他天天打交道。 知识点&#xff1a; numpy数组的创建&#xff1a;简单创建、随机创建、遍历、运算numpy数组的索引&#xff1a…

Redis 学习笔记 5:分布式锁

Redis 学习笔记 5&#xff1a;分布式锁 在前文中学习了如何基于 Redis 创建一个简单的分布式锁。虽然在大多数情况下这个锁已经可以满足需要&#xff0c;但其依然存在以下缺陷&#xff1a; 事实上一般而言&#xff0c;我们可以直接使用 Redisson 提供的分布式锁而非自己创建。…

游戏开发实战(一):Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

文章目录 奇美拉项目游戏规则奇美拉(Chimeras)档案领队成员 结果展示&#xff1a; 奇美拉项目 由于项目工程较大&#xff0c;并且我打算把我的思考过程和实现过程中踩过的坑都分享一下&#xff0c;因此会分3-4篇博文详细讲解本项目。本文首先介绍下游戏规则并给出奇美拉档案。…

02- 浏览器运行原理

文章目录 1. 网页的解析过程浏览器内核 2. 浏览器渲染流程2.1 解析html2.2 生成css规则2.3 构建render tree2.4 布局(Layout)2.5 绘制(Paint) 3. 回流和重绘3.1 回流reflow&#xff08;1&#xff09;理解&#xff1a;&#xff08;2&#xff09;出现情况 3.2 重绘repaint&#x…