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 菜鸟图库是一个综合性素材网站ÿ…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
