web前端tips:js继承——原型链继承

输入图片描述

原型链继承

原型链继承是 JavaScript 中实现继承的一种方式,它通过使用原型来实现对象之间的继承关系。

在 JavaScript 中,每个对象都有一个原型(prototype),它是一个指向另一个对象的引用。当我们访问一个对象的属性时,如果该对象自身没有该属性,则会去它的原型上查找,如果原型上也没有,则会继续往上层原型查找,直到找到该属性或者到达原型链的顶端。

原型链继承就是利用这种原型链的特性来实现继承。具体步骤如下:

  1. 创建一个父类的构造函数,并定义父类的属性和方法。
  2. 创建一个子类的构造函数,并将其原型对象指向父类的实例。
  3. 在子类的构造函数中添加子类独有的属性和方法。
// 1
function Parent() {
  this.arr = [1,2,3]
}
Parent.prototype.getArr = function() {
  return this.arr
}

// 2
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()

// 3
Child.prototype.getName = function() {
  return this.name
}

// 实例化
var child = new Child()
child.getName() // 'Child'
child.getArr() // [1,2,3]

通过以上步骤,我们就实现了子类继承父类的属性和方法,并且可以在子类中添加自己独有的属性和方法。这样,当我们创建子类的实例时,它会先在自身查找属性和方法,如果没有找到,则会去父类的原型上查找,从而实现了继承。

优点

原型链继承方式的优点在于 简单

缺点

使用原型链继承的一个缺点是,所有子类的实例都共享同一个父类的实例,这可能会导致子类实例之间相互影响。

child.arr.push(4)
child.getArr() // [1,2,3,4]

var child2 = new Child()
child2.gerArr() // [1,2,3,4],想要的结果应该是[1,2,3]

另外,如果子类需要传递参数给父类的构造函数,就无法通过直接调用父类的构造函数来实现,需要通过中间的过程来传递参数。

结语

牵手 持续为你分享各类知识和软件 ,欢迎访问、关注、讨论 并留下你的小心心❤

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

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

相关文章

java项目之社区生活超市管理系统(ssm+mysql+jsp)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的社区生活超市管理系统。技术交流和部署相关看文章末尾! 开发环境: 后端: 开发语言:Java 框…

Redis高级篇(二)

Redis高级篇之多级缓存 什么是多级缓存 JVM进程缓存 Lua语法入门 实现多级缓存 缓存同步 一、什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后,先查询Redis,如果未命中则查询数据库,如图: 存在下面的问题:…

TCP/UDP的首部

TCP/UDP首部信息 TCP首部第一个4字节第二个4字节与第三个4字节第四个4字节第五个4字节选项最大报文段长度(MSS)选项窗口扩大选项时间戳选项 什么时候发送RST包UDP首部 TCP首部 TCP 首部长度为20字节,加上选项部分最大可达60字节。 第一个4…

云原生|kubernetes|kubernetes集群部署神器kubekey安装部署高可用k8s集群(半离线形式)

前言: 云原生|kubernetes|kubernetes集群部署神器kubekey的初步使用(centos7下的kubekey使用)_晚风_END的博客-CSDN博客 前面利用kubekey部署了一个简单的非高可用,etcd单实例的kubernetes集群,经过研究,…

STM32MP157驱动开发——LED 驱动( GPIO 子系统)

文章目录 编写思路GPIO子系统的LED驱动程序(stm32mp157)如何找到引脚功能和配置信息在设备树中添加 Pinctrl 信息leddrv.cledtest.cMakefile编译测试 编写思路 阅读:STM32MP157驱动开发——GPIO 和 和 Pinctrl 子系统的概念可知利用GPIO子系统去编写LED驱动&#x…

【每日一题】—— B. Ternary String (Educational Codeforces Round 87 (Rated for Div. 2))

🌏博客主页:PH_modest的博客主页 🚩当前专栏:每日一题 💌其他专栏: 🔴 每日反刍 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓称…

华为数通HCIP-OSPF基础

路由协议 作用:用于路由设备学习非直连路由; 动态路由协议:使路由设备自动学习到非直连路由; 分类: 按照算法分类: 1、距离矢量路由协议;(RIP、BGP) 只交互路由信息…

了解 3DS MAX 3D摄像机跟踪设置:第 4 部分

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 项目设置 步骤 1 打开“后效”。 打开后效果 步骤 2 转到合成>新合成以创建新合成。 将“宽度”和“高度”值分别设置为 1280 和 720。将帧速率设置为 25,将持续时间设置为 12 秒。单…

前端开发中的常见优化

目录 外观 兼容 不同尺寸(包裹,height:100%) 不同 浏览器 隐藏滚动条 的 不同属性名 重排->重绘 不显示 display:none->禁用disable 性能 导航重复(修改原型push、replace方法) 搜索防抖 import { debo…

LLM - Chinese-Llama-2-7b 初体验

目录 一.引言 二.模型下载 三.快速测试 四.训练数据 五.总结 一.引言 自打 LLama-2 发布后就一直在等大佬们发布 LLama-2 的适配中文版,也是这几天蹲到了一版由 LinkSoul 发布的 Chinese-Llama-2-7b,其共发布了一个常规版本和一个 4-bit 的量化版本…

Animator Animator Controller Avatar relationship

Animator 组件用于将动画分配给场景中的游戏对象。Animator 需要对Animator Controller 的引用,该控制器定义要使用的动画剪辑,并控制何时以及如何在它们之间混合和过渡。 如果 GameObject 是具有 Avatar 定义的人形角色,则 Avatar 也应在此组…

FlatBuffers 使用编译器

1、前言 可能刚接触的人会思考为啥要使用编译器: 一般跨平台、跨语言的都有一套固定的流程,大致可分为: 撰写IDL文件 -> 使用对应语言的编译器,编译成对应的语言 -> 序列化 ->持久化 -> 反序列化 这里就对应着这个…

[ELK安装篇]:基于Docker虚拟容器化(主要LogStash)

文章目录 一:前置准备-(参考之前博客):1.1:准备Elasticsearch和Kibana环境:1.1.1:地址:https://blog.csdn.net/Abraxs/article/details/128517777 二:Docker安装LogStash(数据收集引擎&#xff…

Flutter系列(2):解决Flutter打包成APP无法访问网络资源

将flutter项目打包成Android后&#xff0c;发现无法访问网络图片&#xff0c;权限不足&#xff0c;没有授权网络权限&#xff0c;解决办法如下&#xff1a; 在android/app/src/main/AndroidManifest.xml中添加如下代码即可 <uses-permission android:name"android.perm…

3、基于Zookeeper实现分布式锁

目录 3.1、Zookeeper安装和相关概念3.1.1 安装启动3.1.2 相关概念3.1.3 Java客户端 3.2 Zookeeper实现分布式锁的思路分析3.3 ZooKeeper分布式锁的基本实现 3.1、Zookeeper安装和相关概念 3.1.1 安装启动 # 解压到/mysoft文件夹下 tar -zxvf zookeeper-3.7.0-bin.tar.gz # 重…

剑指offer61.扑克牌中的顺子

我的想法非常简单&#xff0c;就是先给数组排序&#xff0c;然后统计里面有几个0&#xff0c;然后遍历数组&#xff0c;如果是0或者比后面一个数小1就直接进入下一次循环&#xff0c;如果比后面一个数小2&#xff0c;就用掉一个0&#xff0c;0的数量减1&#xff0c;如果比后面的…

MySQL基础(二)SQL语句

目录 前言 一、SQL语句类型 二、数据库操作 查看 创建 进入 删除 更改 三、数据表操作 &#xff08;一&#xff09;、数据类型 1.数值类型 2.时间\日期类型 3.字符串类型 4.二进制类型 &#xff08;二&#xff09;、查看 1.查看表内的数据 2.查看表格的属性 &…

【Java基础教程】(四十六)IO篇 · 下:System类对IO的支持:错误输出、信息输出、系统输入,字符缓冲流、扫描流和对象序列化流~

Java基础教程之IO操作 下 &#x1f539;本节学习目标1️⃣ System类对 IO 的支持1.1 错误输出&#xff1a;System.err1.2 信息输出&#xff1a;System.out1.3 系统输入&#xff1a;System. in 2️⃣ 字符缓冲流&#xff1a;BufferedReader3️⃣ 扫描流&#xff1a;Scanner4️⃣…

Python - Opencv应用实例之树叶自动分割、标签及统计分析系统

Python - Opencv应用实例之树叶自动分割、标签及统计分析系统 本文通过Python+opencv 实现这样的需求:输出位置和角度(x, y, r),并标记出轮廓基于传统图像处理算法实现,算法原理:输入图像 -> 灰度化 -> 二值化 -> 形态学处理 -> 轮廓提取 -> 树叶中心定位 -…

matlab二维图形的绘制(1)

概述 matlab数学计算中有时候需要将函数通过图形更加直观的展示给用户的时候就需要使用到二维绘图。绘图常常采用的绘图命令便是 plot &#xff0c;再添加一些辅助命令使得图形更加的形象直观。 二维绘图中也包括针状图&#xff0c;阶梯图&#xff0c;散点图&#xff0c;条形图…