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

目录

一、定义

二、语法和实现方式

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.mfbz.cn/a/889895.html

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

相关文章

OpenCV高级图形用户界面(1)创建滑动条函数createTrackbar()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 创建一个滑动条并将其附加到指定的窗口。 该函数 createTrackbar 创建一个具有指定名称和范围的滑动条(滑块或范围控制)…

C语言之扫雷小游戏(完整代码版)

说起扫雷游戏,这应该是很多人童年的回忆吧,中小学电脑课最常玩的必有扫雷游戏,那么大家知道它是如何开发出来的吗,扫雷游戏背后的原理是什么呢?今天就让我们一探究竟! 扫雷游戏介绍 如下图,简…

使用3080ti配置安装blip2

使用3080ti运行blip2的案例 本机环境(大家主要看GPU,ubuntu版本和cuda版本即可):安装流程我最后安装的所有包的信息(python 3.9 )以供参考(environment.yml): 本机环境&a…

【python实操】python小程序之计算对象个数、游戏更新分数

引言 python小程序之计算对象个数、游戏更新分数 文章目录 引言一、计算对象个数1.1 题目1.2 代码1.3 代码解释1.3.1 代码结构1.3.2 模块解释1.3.3 解释输出 二、游戏更新分数2.1 题目2.2 代码2.3 代码解释2.3.1 定义 Game 类2.3.2 创建 Game 实例并调用方法 三、思考3.1 计算对…

安卓13禁止锁屏 关闭锁屏 android13禁止锁屏 关闭锁屏

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改5.彩蛋1.前言 设置 =》安全 =》屏幕锁定 =》 无。 我们通过修改系统屏幕锁定配置,来达到设置屏幕不锁屏的配置。像网上好多文章都只写了在哪里改,改什么东西,但是实际上并未写明为什么要改那…

RabbitMQ 高级特性——死信队列

文章目录 前言死信队列什么是死信常见面试题死信队列的概念:死信的来源(造成死信的原因有哪些)死信队列的应用场景 前言 前面我们学习了为消息和队列设置 TTL 过期时间,这样可以保证消息的积压,那么对于这些过期了的消…

数据结构-4.6.KMP算法(旧版下)-朴素模式匹配算法的优化

一.绪论: 当主串字符和模式串字符不匹配时会执行jnext[j]来改变模式串的指针,但主串的指针不变。 二.求模式串的next数组: 1.例一: 如模式串abcabd,当第六个字符d匹配失败时,此时主串中前五个字符abcab都…

连锁店线下线上一体化收银系统源码

近年来线下线上一体化已经成为很多连锁门店追求的方向。其中,线下门店能够赋予品牌发展的价值依然不可小觑。在线下门店中,收银系统可以说是运营管理的关键工具,好的收银系统能够为品牌门店赋能。对于连锁品牌而言,对收银系统的要…

软媒市场新蓝海:软文媒体自助发布与自助发稿的崛起

在信息时代的浪潮中,软媒市场以其独特的魅力和无限的潜力,成为了企业营销的新宠。随着互联网的飞速发展,软文媒体自助发布平台应运而生,为企业提供了更加高效、便捷的营销方式。而自助发稿功能的加入,更是让软媒市场的蓝海变得更加广阔。 软媒市场的独特价值 软媒市场之所以能…

Android Studio Koala中Kotlin引入序列化Parcelable

找了一堆资料没有新构建序列化的方法,踩坑经历如下: 前提是使用Kotlin创建的项目 之前的build.gradle版本写法如下: 但是新版Android Studio Koala使用序列化模式发生了改变,如下: 测试成功如下: 发出来…

【万字长文】Word2Vec计算详解(三)分层Softmax与负采样

【万字长文】Word2Vec计算详解(三)分层Softmax与负采样 写在前面 第三部分介绍Word2Vec模型的两种优化方案。 【万字长文】Word2Vec计算详解(一)CBOW模型 markdown行 9000 【万字长文】Word2Vec计算详解(二&#xff0…

PyCharm+ssh跳板机+服务器

PyCharmssh跳板机服务器 文章目录 PyCharmssh跳板机服务器准备工作登录服务器查看CUDA查看conda创建虚拟环境 前言配置ssh免密登录设置ssh隧道配置pycharm测试第一种第二种 传输数据 准备工作 登录服务器 直接ssh连接就行,在终端(命令行)直接输入下面命令: 跳板机&#xff1…

windows系统更新升级node指定版本【避坑篇!!!亲测有效】(附带各版本node下载链接)一定看到最后!不用删旧版!

Node.js 是一个开源、跨平台的 JavaScript 运行时环境,广泛应用于服务器端和网络应用的开发。随着 Node.js 版本的不断更新,我们可能需要升级到特定版本以满足项目需求或修复安全漏洞。又或者是学习开发另外一个新项目,新项目对Node版本要求更…

数学建模算法与应用 第12章 现代优化算法

目录 12.1 粒子群优化算法 Matlab代码示例:粒子群优化算法求解函数最小值 12.2 遗传算法 Matlab代码示例:遗传算法求解函数最小值 12.3 蚁群算法 Matlab代码示例:蚁群算法求解旅行商问题 12.4 Matlab 遗传算法工具 使用遗传算法工具箱…

基于Python+sqlite3实现(Web)图书管理系统

项目名称:LibraryManagementSystem 一、系统目标 使用了Python作为语言,以django为后台,sqlite3作为数据库,UI基于bootstrap的图书管理系统,模拟图书管理的真实场景,考虑客观需求,界面简洁、操作方便&…

Android Studio实现安卓图书管理系统

获取源码请点击文章末尾QQ名片联系,源码不免费,尊重创作,尊重劳动 171安卓小说 1.开发环境 android stuido3.6 jak1.8 2.功能介绍 安卓端: 1.注册登录 2.图书列表 3.图书借阅 4.借阅列表 3.系统截图

Go编译为可执行文件

在window下打包成其他系统可运行的文件 1.在window下打包成window下可执行文件 在项目main.go同级目录下,逐条执行以下命令 set CGO_ENABLED0 set GOOSwindows set GOARCHamd64 go build -o main-windows.exe main.go 2.在window下打包成linux 在项目main.go同级目…

appium中的uiautomatorviewer显示的界面为横屏解决方法

uiautomatorviewer显示的界面为横屏解决方法 解决方法: 修改模拟器的分辨率,比如540:900就可解决了

鸿蒙NEXT开发-面试题库(最新)

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

智能化叉车作业安全高效监控管理系统方案

在物流作业中,智能叉车管理系统的引入,不仅极大地提升了作业效率,还显著增强了作业安全性,为物流行业的现代化转型注入了强劲动力。 1、产品简介 2023A智能叉车管理系统是用于工业车辆安全监控管理的车载终端,具有快…