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

news2024/12/24 13:19:12

输入图片描述

原型链继承

原型链继承是 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]

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

结语

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

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

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

相关文章

Quartz线程调度源码分析

Quartz作为任务调度的组件,其中涉及到多种线程,主要分为主线程、调度线程和工作线程。 主线程:创建Quartz的调度工厂(SchedulerFactory)、调度器(Scheduler)、触发器(Trigger)、任务(Job)并启动调度器的线程。这里的主…

Pytest结合数据驱动-yaml

Pytest 结合数据驱动 YAML 数据驱动 什么是数据驱动? 数据驱动就是数据的改变从而驱动自动化测试的执行,最终引起测试结果的改变。简单来说,就是参数化的应用。数据量小的测试用例可以使用代码的参数化来实现数据驱动,数据量大的…

Ceph社区上游正式合入openEuler原生支持,并通过CI持续验证

作为覆盖全场景应用、支持多样性算力的面向数字基础设施的开源操作系统,openEuler始终遵循“上游优先”的策略,帮助上游开源软件原生支持openEuler,让openEuler系操作系统的用户可以在开发、集成、使用这些开源软件或基于这些开源软件的产品和…

比较版本号(力扣)思维 JAVA

给你两个版本号 version1 和 version2 ,请你比较它们。 版本号由一个或多个修订号组成,各修订号由一个 ‘.’ 连接。每个修订号由 多位数字 组成,可能包含 前导零。每个版本号至少包含一个字符。修订号从左到右编号,下标从 0 开始…

vue3+ts+elementui-plus二次封装树形表格

复制粘贴即可&#xff1a; 一、定义table组件 <template><div classmain><div><el-table ref"multipleTableRef" :height"height" :default-expand-all"isExpend" :data"treeTableData"style"width: 100%…

IL汇编字符串连接

在此实现了一个基本的IL汇编程序&#xff1b; 了解MSIL汇编和IL汇编评估堆栈_bcbobo21cn的博客-CSDN博客 它用了下面两句来在屏幕输出字符串&#xff0c; ldstr "I am from the IL Assembly Language..." call void [mscorlib]System.Console::WriteLine (string) …

Ros终端出现找不到bash: /home/***/devel/setup.bash: 没有那个文件或目录

现象&#xff1a;Ros终端出现找不到bash: /home/***/devel/setup.bash: 没有那个文件或目录 问题&#xff1a;配置时路径写错 解决方法&#xff1a;改正路径 1.打开文件 gedit ~/.bashrc2.修改正确路径

Day 42算法记录| 动态规划 08

这里写目录标题 139. 单词拆分多重背包问题背包问题总结 139. 单词拆分 单词就是物品&#xff0c;字符串s就是背包 1.dp[0]背包啥也不要用装&#xff0c;true。 2. for循环&#xff0c;顺序很重要&#xff0c;所以先背包再物品 如果求组合数就是外层for循环遍历物品&#xff0…

UG\NX二次开发 遍历部件中所有表达式

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 遍历部件中所有表达式 效果: 代码: #include "me.hpp" #include <uf_defs.h> #include <NXOpen/NXException.hxx> #include <NXOpen/Session.hxx> #include <NXO…

java根据模板导出word

java根据模板导出word 日常开发中&#xff0c;常常会遇到各种各样的表格进行导出&#xff0c;比较好的办法就是提前弄好word模版&#xff0c;再通过遍历的方式进行导出文档 1、制作word模版 模版编写 内容替换 目标下面模版进行多页展示 将word转换成xml 将xml格式化 再将x…

FTP文件传输工具:简单、高效、实用的数据传输方式

在当今的信息化社会&#xff0c;数据已经成为各行各业的重要资产&#xff0c;而数据的传输和交换则是数据价值的体现。在很多场景中&#xff0c;企业需要传输或接收大文件&#xff0c;比如设计图纸、视频素材、软件开发包、数据库备份等。这些文件的大小通常在几百兆字节到几十…

版本控制泄露代码

在文章的开头我们首先得了解什么是版本控制 在实际的开发过程中&#xff0c;我们会用到两个工具来进行版本控制和代码托管&#xff0c;它们分别是git和svn。 而在CTF中我们主要面对的就是git或svn的版本控制泄露。 &#xff08;1&#xff09;在使用 SVN 管理本地代码过程中&am…

在拦截器中使用redis报错空指针

问题 当在拦截器中使用 redis 时&#xff0c;获取不到 RedisTemplate 对象 原因 拦截器在SpringContext初始化之前就执行了&#xff0c;即Bean初始化之前它就执行了&#xff0c;所以肯定是无法获取SpringIOC容器中的内容的 解决 提前实例化拦截器 在配置类里面先实例化拦截…

vue2项目迁移到vue3中的改动——vuex部分——基础积累2

pinia中文文档里面有关于vuex的部分&#xff1a; Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起&#xff0c;最初的原则仍然相同&#xff0c;但 Pinia 对 Vue 2 和 Vue 3 都有效&#xff0c;并且不需要您使用组合 API。 除了安装和 SSR 之外&…

【使用时空RBF-NN进行非线性系统识别】实现了 RBF、分数 RBF 和时空 RBF 神经网络,用于非线性系统识别研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 2.1 算例1 2.2 算例2 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 本文用于非线性系统识别任务的径向基函数神经网络&#xff08;RBF-NN&#xff09;的三种变体。特别是&#xff0c;我实现…

Cesium态势标绘专题-正多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

Android OpenGL 教程——窗口初始化绘制矩形

上节介绍了 Native 工程初始化&#xff0c;但是我们的窗口什么都没有&#xff0c;这节我们将 NativeActivity 创建的 window 绑定到 OpenGL 创建的 display 的 surface 上&#xff0c;并且绘制背景颜色和三角形&#xff0c;通过三角形绘制出一个矩形 显示系统创建 void Rende…

app专项性能测试测试指标和测试方法

工作中没有做过app这块的性能测试&#xff0c;但是你有面试问到过&#xff0c;现在做个总结如下 1、首次加载&#xff08;冷启动&#xff09; A.使用logcat监控activitymanager B.adb shell am start -w C.人工秒表计数 2、非第一启动&#xff08;热启动&#xff09; 应…

【开发心得】百度终于向百度发起挑战

没错&#xff0c;题目的确读起来别扭&#xff0c;但事实如此。 第一个百度&#xff0c;说的是百度的“文心千帆”。&#xff08;以下简称“千帆”&#xff09; 第二个百度&#xff0c;说的是百度的“搜索引擎”。&#xff08;以下简称“搜索”&#xff09; 这么讲就容易理解…

深入了解数据库的索引分类以及回表查询原理

索引的分类 在InnoDB存储引擎中的又可以分为以下两种 聚集索引的选取规则 如果有主键&#xff0c;主键索引就是聚集索引。 如果不存在主键&#xff0c;将会使用第一个唯一&#xff08;UNIQUE&#xff09;索引作为聚集索引 如果表没有主键&#xff0c;或者没有合适的唯一索引…