前端继承:原理、实现方式与应用场景

news2024/11/25 20:53:36

目录

一、定义

二、语法和实现方式

1.原型链继承

2.构造函数继承

3.组合继承

4.ES6类继承

三、使用方式

四、优点

五、缺点

六、适用场景


一、定义

        前端继承是指在面向对象编程中,一个对象可以继承另一个对象的属性和方法。在前端领域,通常是指 JavaScript 中的继承机制,通过这种机制,可以创建具有相似功能的对象,避免重复编写代码。

二、语法和实现方式

1.原型链继承

        原理:

                利用原型对象的链式查找机制实现继承。每个对象都有一个原型对象,当访问一个对象的属性或方法时,如果在该对象本身找不到,就会在其原型对象中查找,依次类推,直到找到或者到达原型链的顶端(Object.prototype)。

        示例:

     function Parent() {
       this.name = 'parent';
     }

     Parent.prototype.sayHello = function() {
       console.log('Hello from parent');
     };

     function Child() {}

     Child.prototype = new Parent();

     const child = new Child();
     console.log(child.name); // 'parent'
     child.sayHello(); // 'Hello from parent'

2.构造函数继承

        原理:

                在子构造函数中调用父构造函数,通过使用callapply方法将父构造函数的作用域绑定到子构造函数中,从而继承父构造函数的属性。

        示例:

     function Parent(name) {
       this.name = name;
     }

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

     const child = new Child('child');
     console.log(child.name); // 'child'

3.组合继承

        原理:

                结合原型链继承和构造函数继承的优点,通过在子构造函数中调用父构造函数来继承属性,同时将子构造函数的原型设置为父构造函数的实例,从而继承方法。

        示例:

     function Parent(name) {
       this.name = name;
     }

     Parent.prototype.sayHello = function() {
       console.log('Hello from parent');
     };

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

     Child.prototype = new Parent();
     Child.prototype.constructor = Child;

     const child = new Child('child');
     console.log(child.name); // 'child'
     child.sayHello(); // 'Hello from parent'

4.ES6类继承

        原理:

                使用class关键字定义类,通过extends关键字实现继承。ES6 的类继承更加直观和简洁,类似于其他面向对象编程语言的继承方式。

        示例:

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

       sayHello() {
         console.log('Hello from parent');
       }
     }

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

     const child = new Child('child');
     console.log(child.name); // 'child'
     child.sayHello(); // 'Hello from parent'

三、使用方式

1.确定继承关系

        首先确定哪些对象之间存在继承关系,明确父类和子类的职责和功能。

2.选择继承方式

        根据项目需求和代码结构,选择合适的继承方式。例如,如果需要继承多个父类,可以考虑使用组合继承或混入(mixin)的方式。

3.实现继承

        按照选择的继承方式,编写相应的代码实现继承。在实现过程中,注意处理好父类和子类的构造函数、属性和方法的继承关系。

4.调用继承的方法和属性

        在子类的实例中,可以直接调用继承自父类的方法和属性。如果需要覆盖父类的方法,可以在子类中重新定义该方法。

四、优点

1.代码复用

        可以避免重复编写相同的代码,提高开发效率。通过继承,可以将通用的功能和属性提取到父类中,子类只需要继承父类并添加特定的功能即可。

2.可维护性

        当需要修改通用功能时,只需要在父类中进行修改,所有继承自该父类的子类都会自动获得修改后的功能。这样可以减少代码的维护成本,提高代码的可维护性。

3.扩展性

        继承可以方便地扩展现有代码的功能。可以在子类中添加新的方法和属性,或者覆盖父类的方法,以满足不同的需求。

五、缺点

1.继承层次过深

        如果继承层次过深,可能会导致代码的复杂性增加,难以理解和维护。在设计继承关系时,应尽量避免过多的层次结构。

2.耦合性

        继承会增加父类和子类之间的耦合性。如果父类的结构发生变化,可能会影响到所有继承自该父类的子类。在进行代码修改时,需要谨慎考虑对继承关系的影响。

3.灵活性受限

        一旦确定了继承关系,子类的功能和行为就受到了父类的限制。在某些情况下,可能需要更灵活的方式来组合和复用代码,而不是单纯依靠继承

六、适用场景

业务逻辑相似的模块

        当多个模块具有相似的业务逻辑和功能时,可以使用继承来提取通用的部分,减少代码重复。例如,在一个电商系统中,商品管理模块和订单管理模块可能都需要处理数据的验证和存储,可以将这些通用功能提取到一个父类中,让商品管理和订单管理模块继承该父类。

框架和库的开发

        在开发前端框架和库时,继承是一种常用的技术。可以通过继承来扩展和定制框架的功能,满足不同项目的需求。例如,在 React 框架中,组件可以通过继承React.Component类来获得 React 的生命周期方法和状态管理功能。

大型项目的架构设计

        在大型项目中,合理的继承关系可以帮助构建清晰的代码结构,提高代码的可维护性和可扩展性。可以根据业务领域和功能模块来设计继承层次,将通用的功能和行为封装在父类中,让具体的业务模块继承并扩展这些功能。

关于继承的介绍就到此结束,如果对前端开发的设计模式感兴趣的话,可以点开右下角“专栏目录”查看。码字不易,点个赞再走吧

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

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

相关文章

HC32F460KETA PETB JATA 工业 自动化 电机

HC32F460 系列是基于 ARM Cortex-M4 32-bit RISC CPU,最高工作频率 200MHz 的高性能 MCU。Cortex-M4 内核集成了浮点运算单元(FPU)和 DSP,实现单精度浮点算术运算,支持 所有 ARM 单精度数据处理指令和数据类型&#xf…

【精选】基于javaweb的流浪动物领养系统(源码+定制+开发)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

centos系列图形化 VNC server配置,及VNC viewer连接,2024年亲测有效

centos系列图形化 VNC server配置,及VNC viewer连接 0.VNC服务介绍 VNC英文全称为Virtual Network Computing,可以位操作系统提供图形接口连接方式,简单的来说就是一款桌面共享应用,类似于qq的远程连接。该服务是基于C/S模型的。…

鸿蒙NEXT开发-知乎评论小案例(基于最新api12稳定版)

注意:博主有个鸿蒙专栏,里面从上到下有关于鸿蒙next的教学文档,大家感兴趣可以学习下 如果大家觉得博主文章写的好的话,可以点下关注,博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…

vue实现列表自动滚动(纯与原生方式)

Vue实现列表自动滚动(纯与原生方式) 源码放在最后!1.效果展示: 2.功能说明: 该滚动可能存在的Bug: 1.如果你写的大屏不是使用的接口轮询的方式可能会存在也页面空白的情况(需要手动刷新才能触发列表滚动),因为我使用的是监听数据的变化然后…

软件供应链十年:探索开源的增长、风险和未来

回顾软件供应链状况报告的 10 年既是一个里程碑,也是一次行动号召。在过去十年中,开源消费改变了软件开发的世界。我们看到了前所未有的创新,但也出现了新的挑战,特别是在管理软件供应链的安全性和完整性方面。 在 Sonatype&…

基于SpringBoot民宿预订系统小程序【附源码】

效果如下: 管理员登录界面 管理员功能界面 用户管理界面 房东管理界面 小程序首页界面 民宿房间界面 功能界面 研究背景 随着旅游业的蓬勃发展和人们对旅行体验的不断追求,民宿作为一种独特的住宿方式,因其个性化、温馨及富含地方特色的服务…

disabled状态el-form下el-button的disabled的精细化控制

有一个很复杂的表单,支持编辑和查看两种模式。 查看时当然不希望编辑,最好是区分模式,在编辑模式下直接用div显示而不是用表单元素。这样工作量就有点大。那就考虑使用表单元素的disabled来让其不能编辑。如果每个表单元素都写这个玩意也是…

ssm职业高中学情成绩系统设计+jsp

系统包含:源码论文 所用技术:SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习,获取源码请私聊我 需要定制请私聊 目 录 摘 要 I Abstract II 第一章 绪论 1 1.1 研究背景 1 1.2 研究意义 1 1.3 研究内容 2 第二章 开发环…

codeforces round976 div2

A find minimum operations 思路&#xff1a;将所给的n变成k进制数&#xff0c;答案就是n的k进制形式下的位数之和 代码&#xff1a; #include <bits/stdc.h> using namespace std;typedef long long ll;ll n, k;void solve() {cin >> n >> k;ll cnt 0…

详解Spotbugs-maven-plugin(报告如何生成html测试报告)

Spotbugs介绍 SpotBugs是Findbugs的继任者&#xff08;Findbugs已经不再维护&#xff09;&#xff0c;用于对Java代码进行静态分析&#xff0c;查找相关的漏洞&#xff0c;SpotBugs比Findbugs拥有更多的校验规则。静态分析会检查Java字节码&#xff08;.class文件&#xff09;…

专题十一_递归_回溯_剪枝_综合练习_算法专题详细总结

目录 1. 找出所有⼦集的异或总和再求和&#xff08;easy&#xff09; 解析&#xff1a; 方法一&#xff1a; 解法二&#xff1a; 总结&#xff1a; 2. 全排列 Ⅱ&#xff08;medium&#xff09; 解析&#xff1a; 解法一&#xff1a;只关心“不合法”的分支 解法二&…

AI比诺奖得主更聪明。。。

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 AI圈又发生了哪些新鲜事&#xff1f; 特斯拉Optimus人形机器人亮相&#xff1a;日常任务好帮手 特斯拉在Cybercab活动上展示了其新款人形机器人Optimus&#xff0c;这款机器人能够执行拿包裹、浇水等…

CentOS快速配置网络Docker快速部署

CentOS快速配置网络&&Docker快速部署 CentOS裸机Docker部署1.联通外网2.配置CentOS镜像源3.安装Docker4.启动Docker5.CentOS7安装DockerCompose Bug合集ERROR [internal] load metadata for docker.io/library/java:8-alpineError: Could not find or load main class …

20241013组会

文章&#xff1a;A learnable end-edge-cloud cooperative network for driving emotion sensing 引言&#xff1a; 驾驶员的情绪状态直接影响安全驾驶。在“车-人-路-云”一体化控制框架下&#xff0c;我们提出了一种端-边-云协同情感感知网络模型&#xff08;EEC-Net&#x…

Android平台RTSP|RTMP播放器PK:VLC for Android还是SmartPlayer?

好多开发者&#xff0c;希望在Android端低延迟的播放RTMP或RTSP流&#xff0c;本文就目前市面上主流2个直播播放框架&#xff0c;做个简单的对比。 VLC for Android VLC for Android 是一款功能强大的多媒体播放器&#xff0c;具有以下特点和功能&#xff1a; 广泛的格式支持…

FPAG学习(5)-三种方法实现LED流水灯

目录 1.移位实现LED流水灯 1.1创建工程及源文件代码 1.1.1源代码 1.1.2仿真代码 1.1.3仿真 1.2实验结果 1.2.1总结 2.循环移位实现LED流水灯 3.38译码器实现LED流水灯 3.1原理 3.2源程序 1.移位实现LED流水灯 1.1创建工程及源文件代码 1.1.1源代码 利用计数器计数到…

【深度学习】经典的深度学习模型-01 开山之作:CNN卷积神经网络LeNet-5

【深度学习】经典的深度学习模型-01 开山之作&#xff1a;CNN卷积神经网络LeNet-5 Note: 草稿状态&#xff0c;持续更新中&#xff0c;如果有感兴趣&#xff0c;欢迎关注。。。 0. 论文信息 article{lecun1998gradient, title{Gradient-based learning applied to document r…

【智能算法应用】长鼻浣熊优化算法求解二维路径规划问题

摘要 本文采用长鼻浣熊优化算法 (Coati Optimization Algorithm, COA) 求解二维路径规划问题。COA 是一种基于长鼻浣熊的觅食和社群行为的智能优化算法&#xff0c;具有快速收敛性和较强的全局搜索能力。通过仿真实验&#xff0c;本文验证了 COA 在复杂环境下的路径规划性能&a…

【微服务】springboot3 集成 Flink CDC 1.17 实现mysql数据同步

目录 一、前言 二、常用的数据同步解决方案 2.1 为什么需要数据同步 2.2 常用的数据同步方案 2.2.1 Debezium 2.2.2 DataX 2.2.3 Canal 2.2.4 Sqoop 2.2.5 Kettle 2.2.6 Flink CDC 三、Flink CDC介绍 3.1 Flink CDC 概述 3.1.1 Flink CDC 工作原理 3.2 Flink CDC…