ES5中实现继承
本篇文章主要说明在ES5中最通用最兼容的继承实现方式,继承作为面向对象的三大特性之一,在js中实现继承对代码的简洁性,逻辑的连贯性都有很大的帮助。
实现思路
封装创建中间联系对象的函数
继承可以简单理解为建立子类和父类之间的联系,从而实现代码和函数的复用,建立子类和父类的联系,也就是建立两个构造函数之间的联系,我们不难想到可以通过原型,原型链来实现,让子类与父类的原型建立联系,就可以达到我们的目的。
如果我们直接将子类的prototype属性指向父类的原型的话,就会导致继承很多我们并不需要的属性,所以我们通过下图这种方式:

将创建中间建立联系对象的代码封装成为一个函数,传入的参数p为父类的原型对象,将p赋值给F的原型,并将其实例返回。
封装继承函数
接下来,我们将createObj返回的实例对象赋值给子类的原型,建立父类和子类的联系,也就是继承关系,实现代码如下图:

封装成继承函数,将子类和父类作为参数传入,将子类的prototype指向createObj函数返回的实例对象,并在子类原型中添加constructor属性,指向子类的构造函数对象,在需要继承的位置,直接调用inherit函数就能完成继承。
完整代码
function Person(name, age) {this.name = name;this.age = age;
};Person.prototype.work = function() {console.log("撸起袖子加油干")
}function Children(name, age, responsibility) {Person.call(this, name, age);this.responsibility = responsibility;
};function createObj(p) {function F() {};F.prototype = p;return new F()
}function inherit(Subtype, Supertype) {Subtype.prototype = createObj(Supertype.prototype);Object.defineProperty(Subtype.prototype, 'constructor', {enumerable: false,configurable: true,writable: true,value: Subtype})
}inherit(Children, Person);Children.prototype.study = function() {console.log("学习");
}var child = new Children("guanju", 18, "成家立业");
console.log(child);
child.study();
child.work();
相关文章:
ES5中实现继承
本篇文章主要说明在ES5中最通用最兼容的继承实现方式,继承作为面向对象的三大特性之一,在js中实现继承对代码的简洁性,逻辑的连贯性都有很大的帮助。 实现思路 封装创建中间联系对象的函数 继承可以简单理解为建立子类和父类之间的联系&…...
面试鸭 - 专注于面试刷题的网站
网上面试题有很多,但此套面试题真实、原创、高频,全网最强。 题目涵盖大中小公司,真实靠谱,有频率和难度的标记,助你成为Offer收割机。 面试鸭地址:https://mianshiya.skyofit.com/ 本套题是我原创&…...
解决小程序路由超过10层限制
新建 navroter.js // 路由判断,小程序路由超过10层限制 // 避免小程序商品重复切换导致页面到结算单页时无法跳转到收货地址页,所以这里层级限制最大数为8 const MAX_VALUE 8 export function navigateTo(url) {let pages getCurrentPages()let dlt …...
【ceph】AI时代-数据为王-ceph存储将成为未来比较看好的赛道之一,为什么不all in一把学习一个不那么卷的赛道呢?
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...
《小·意·思》特殊符号
title: 《小意思》特殊符号 date: 2023-11-17 15:27:21 updated: 2023-11-17 15:27:21 categories: 小意思 excerpt: 上下标号、标点、运算符、标号、时间相关、语言、货币、音乐、形状符号、其他符号。 comments: false tags: top_image: /images/backimg/SunsetClimbing.png …...
Web server failed to start. Port 8080 was already in use.
Windows 服务端口被占用,杀死进程命令: netstat -ano | findstr 8080taskkill -PID [xxx] -F...
蓝桥杯第三周算法竞赛D题E题
发现更多计算机知识,欢迎访问Cr不是铬的个人网站 D迷宫逃脱 拿到题目一眼应该就能看出是可以用动态规划来解决。但是怎么定义dp呢? 这个题增加难度的点就在当所在位置与下一个要去的位置互质的时候,会消耗一把钥匙。当没有钥匙的时候就不能移动了。想…...
国家大基金三期线上金融正式倒计时!11月17日,共启芯片产业新篇章
国家大基金三期线上金融正式倒计时!11月17日,共启芯片产业新篇章 新时代浪潮下,全球化进程不断推动各科技大国的核心发展,芯片作为强有力的竞争标志,是国与国之间的重要技术战争焦点。同时,国内基金发展势…...
Chrony让内网设备时间同步
Centos 搭建NTP服务器 背景:公司服务器时间不同步导致一些认证功能无法使用,网络设备时间不同步日志信息不准确,因此想要在内网搭建一个NTP服务器,作为客户端同步网络时间服务器,作为服务端为内网其他终端提供授时服务…...
在docker中部署MySQL
目录 1、拉取最新的镜像 2、创建mysql容器实例 3、启动mysql实例 4、进入mysql 交互环境 5、登录MySQL数据库 6、尽情享用mysql 1、拉取最新的镜像 docker image pull mysql 2、创建mysql容器实例 第一次执行,需要先创建容器并启动(容器名是mys…...
百家网约车平台发布“阳光五条” 多举措加强司机保障
11月17日,免佣联盟百家网约车平台发布“阳光五条”,通过加大免佣力度、实行车费保镖司机版、72小时保护期等措施,加强对网约车司机的权益保障。 近年,交通运输部推动交通运输新业态平台企业落实“阳光行动”等工作,加…...
JXLS 导出多sheet,带页眉页脚
/*** 生成多sheet Excel* 带自定义页眉页脚** param templatePath* param sheetList* return* throws IOException*/public static byte[] generateMultiSheet(String templatePath, List<JxlsHelper2.SheetContext> sheetList) throws IOException {ByteArrayOutputStre…...
docker数据卷详细讲解及数据卷常用命令
docker数据卷详细讲解及数据卷常用命令 Docker 数据卷是一种将宿主机的目录或文件直接映射到容器中的特殊目录,用于实现数据的持久化和共享。Docker 数据卷有以下特点: 数据卷可以在一个或多个容器之间共享和重用,不受容器的生命周期影响。…...
智能井盖传感器能不能监测井盖位移
智能井盖传感器能够精准监测井盖的位移。这些传感器运用了前沿科技对井盖状态进行实时监测。一旦井盖出现异常移动传感器会立即捕捉到信号,并通过与互联网相连接的智能系统发出警报或记录数据。这种智能监测仪为城市或相关部门的井盖管理提供了实时数据支持…...
.bashrc文件中环境变量配置错误,导致linux命令无法正常使用
问题描述 配置环境变量时出错,导致linux命令无法使用 解决方案: 执行下面命令 export PATH/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin vim就可以使用了,将错误纠正 vim ~/.bashrc 环境生效 source ~/.bashrc…...
HTML易忽略的角落【目录】
目前已有文章 **** 篇 本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。 …...
mysql8.0递归
sql举例: WITH recursive c1 AS( select * from course_category where id 1-1union allselect t2.* from course_category t2 INNER JOIN c1 where t2.parentidc1.id) select * from c1 ORDER BY orderby; 解释: WITH recursive c1 AS( //相当于创…...
处理机器学习数据集中字符串列(pandas.get_dummies)
如图,在数据集中week列的数据不是数值型,会导致我们在训练过程中难以处理。 而pandas库中有一个非常好用的函数,独热编码pandas.get_dummies(df) 使用此函数之后,会在原数据中新建各列代表Fri-Sun,值为0或1ÿ…...
一个UE无法注册的问题
问题场景是环境中只有一个小区,UE在找到这个小区,收到MIB SIB1后一直不发起注册。我想这大概是和S准则不满足有关系了,这个问题基本是又没啥好看的了,太简单了,在SIB1周围找找就解决了,于是我发现了以下log…...
自媒体剪辑必备,6个音效素材网站,你值得拥有。
这6个剪辑必备的音效素材网站一定要收藏好了,有了这几个网站能让你在剪辑的时候事半功倍,还不用担心版权问题。话不多说,直接上干货。 1、菜鸟图库 https://www.sucai999.com/audio.html?vNTYwNDUx 菜鸟图库是一个综合性素材网站ÿ…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
