【JavaScript】原型链和继承
文章目录
- 1. 原型链的概念
- 原型
- 原型链
- 2. 构建原型链
- 构造函数与原型
- 实例与原型链
- 3. 继承的实现
- 原型链继承
- 原型链的问题
- 4. 继承的最佳实践
- 构造函数继承(经典继承)
- 组合继承
- 5. ES6中的类和继承
- 6. 总结
在 JavaScript 中,原型链和继承是构建对象关系的核心概念之一。理解原型链和继承有助于更好地组织代码、复用逻辑,以及创建灵活的对象结构。本篇博客将介绍原型链的概念、构建方式、继承的实现以及一些实际应用。
1. 原型链的概念
原型
在 JavaScript 中,每个对象都有一个关联的原型(prototype),它是一个对象或 null。原型对象包含共享的属性和方法,而对象则可以访问这些属性和方法。
原型链
原型链是由对象的原型构成的链状结构。当试图访问对象的属性或方法时,如果对象本身没有定义,JavaScript引擎就会沿着原型链向上查找,直到找到相应的属性或方法,或者链结束(即原型为 null)。
2. 构建原型链
构造函数与原型
构造函数是用于创建对象的函数,通过构造函数可以定义对象的属性和方法。原型是一个对象,构造函数通过 prototype 属性与原型关联。
function Animal(name) {this.name = name;
}// 通过原型添加方法
Animal.prototype.sayHello = function() {console.log("Hello, I'm " + this.name);
};let cat = new Animal("Whiskers");
cat.sayHello(); // 输出:Hello, I'm Whiskers
实例与原型链
对象实例通过构造函数创建,它们与原型之间的关系构成了原型链。
console.log(cat instanceof Animal); // 输出:true
console.log(cat instanceof Object); // 输出:true
instanceof 运算符可以检查对象是否是特定构造函数的实例,以及是否是 Object 的实例。
3. 继承的实现
原型链继承
原型链继承通过将一个构造函数的实例赋值给另一个构造函数的原型,从而实现继承。
function Cat(name, color) {Animal.call(this, name); // 借用构造函数this.color = color;
}// 将Animal的实例赋值给Cat的原型
Cat.prototype = new Animal();let myCat = new Cat("Whiskers", "gray");
myCat.sayHello(); // 输出:Hello, I'm Whiskers
通过这种方式,Cat 继承了 Animal 的属性和方法。
原型链的问题
原型链继承存在一些问题,比如共享引用类型的属性,无法向超类传递参数等。
4. 继承的最佳实践
构造函数继承(经典继承)
构造函数继承通过在子类构造函数中调用父类构造函数,实现对父类属性的继承。
function Dog(name, color) {Animal.call(this, name);this.color = color;
}let myDog = new Dog("Buddy", "brown");
myDog.sayHello(); // 输出:Hello, I'm Buddy
组合继承
组合继承结合了构造函数继承和原型链继承,解决了原型链继承的问题。
function Bird(name, wingspan) {Animal.call(this, name);this.wingspan = wingspan;
}// 使用Object.create创建新对象,避免引用类型属性共享
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird; // 修复构造函数指向let myBird = new Bird("Feathers", 50);
myBird.sayHello(); // 输出:Hello, I'm Feathers
5. ES6中的类和继承
ES6 引入了 class 关键字,使得面向对象编程更加直观。
class Fish extends Animal {constructor(name, type) {super(name);this.type = type;}swim() {console.log(this.name + " is swimming.");}
}let myFish = new Fish("Goldie", "Goldfish");
myFish.sayHello(); // 输出:Hello, I'm Goldie
myFish.swim(); // 输出:Goldie is swimming.
ES6 的类语法更简洁,但本质上仍然使用原型链实现继承。
6. 总结
原型链和继承是 JavaScript 中重要的概念,它们构建了对象之间的关系,使得代码更具结构和可维护性。通过原型链,对象可以共享属性和方法,实现了灵活的对象结构。继承则使得对象可以基于现有的对象构建,并在此基础上进行扩展。在实际开发中,根据需求选择适当的继承方式,可以提高代码的复用性和可读性。希望通过本篇博客,你对原型链和继承的概念、构建方式、实现方式以及最佳实践有了更深入的了解。
相关文章:
【JavaScript】原型链和继承
文章目录 1. 原型链的概念原型原型链 2. 构建原型链构造函数与原型实例与原型链 3. 继承的实现原型链继承原型链的问题 4. 继承的最佳实践构造函数继承(经典继承)组合继承 5. ES6中的类和继承6. 总结 在 JavaScript 中,原型链和继承是构建对象…...
(二)【Jmeter】专栏实战项目靶场drupal部署
该专栏后续实战示例,都以该篇部署的项目展开操作。 前置条件 参考“(一)【Jmeter】JDK及Jmeter的安装部署及简单配置” 安装部署Jmeter,从文章最后下载“Postman、Rancher.ova、VirtualBox-7.0.12-159484-Win.exe、Xshell-7.0.01…...
使用 ChatGPT系统学习一门知识的技巧
如何使用 ChatGPT 高效学习一门知识?我探索到一种比较高效的方式:首先让 ChatGPT 给你一个学习提纲,然后以此把提纲内容逐个发给 ChatGPT,进行详情学习。 下面以“学习八木天线”工作原理为例说明。 以八木天线为切入点࿰…...
IDEA-常用插件
1、Mybatis Log Free 当我们使用mybatis log在控制台输出sql 内容,输出内容将语句与参数分开打印,还需要手动将参数替换到指定位置。 使用对应插件后,自动将输出内容组装成完整的可直接执行的SQL 在插件市场 查看对应名称,并安装。…...
揭秘:一行代码搞定.Net API高并发的烦恼
高并发下的接口请求重复提交问题 在.Net开发中,我们经常遇到用户疯狂点击同一按钮,或者服务响应慢时重复发送请求,导致数据重复添加或混乱。这不仅浪费资源,更会得到错误的业务结果。如何高效解决这一普遍问题呢? 常规…...
SpringBoot的 8 个优点
目录 1、简化配置 2、快速开发 3、微服务支持 4、内嵌服务器 5、健康监测 6、热部署 7、自动化管理 8、社区支持和生态系统 SpringBoot 是一个基于 Spring 框架的快速开发框架,它通过提供一系列的自动配置、约定优于配置、快速集成等功能,简化了…...
Spark中多分区写文件前可以不排序么
背景 Spark 3.5.0 目前 Spark中的实现中,对于多分区的写入默认会先排序,这是没必要的。可以设置spark.sql.maxConcurrentOutputFileWriters 为大于0来避免排序。 分析 这部分主要分为三个部分: 一个是V1Writes规则的重改; 另一个是FileFormatWriter中…...
突破编程_C++_面试(变量与常量)
面试题 1 : C 中的变量存储类别有哪些,并简要描述它们的特点? 在C中,变量的存储类别决定了变量的生命周期和可见性。以下是C中的几种变量存储类别及其特点: 自动存储期 也称为局部存储类别。这类变量在函数或代码块…...
k8s的一些关键信息(归类摘抄,非提炼)
零:举例说明 当用户提交一个 Deployment 对象到 Kubernetes 集群时,控制平面的 API Server 接收到该请求,并将其转发给 Controller Manager。Controller Manager 中的 Deployment Controller 监听到该请求,并根据用户定义的配置信…...
海外媒体发稿:8个提升影响力的日韩地区媒体发稿推广策略-华媒舍
在今天的数字化时代,媒体发稿推广成为企业和个人增加影响力的重要方式。特别是在日韩地区,这个拥有庞大媒体市场和活跃社交媒体用户的地区,正确的推广策略将对影响力的提升起到关键作用。我们将介绍8个提升影响力的日韩地区媒体发稿推广策略。…...
面试官:能不能给 Promise 增加取消功能和进度通知功能... 我:???
扯皮 这段时间闲着没事就去翻翻红宝书,已经看到 Promise 篇了,今天又让我翻到两个陌生的知识点。 因为 Promise 业务场景太多了自我感觉掌握的也比较透彻,之前也跟着 Promise A 的规范手写过完整的 Promise,所以这部分内容基本上…...
详解MySQL增删查改
众所周知,MySQL是非常重要的数据库语言,下面我们来回顾一下mysql的增删查改吧 MySQL创建数据库: CREATE DATABASE 数据库名;MySQL删除数据库: DROP DATABASE <database_name>; --直接删除,不检查是否存在 DROP…...
Mysql开启bin-log日志
目录 一、安装配置 二、mysqlbinlog命令 一、安装配置 yum -y install mariadb mariadb-server#安装mysql数据库#默认配置文件/etc/my.cnfvim /etc/my.cnflog-binmariadb-bin #开启二进制日志 systemctl restart mariadb#会在/car/lib/mysql/产生二进制日志文件࿰…...
Java:性能优化细节01-10
Java:性能优化细节01-10 在Java程序开发过程中,性能优化是一个重要的考虑因素。常见的误解是将性能问题归咎于Java语言本身,然而实际上,性能瓶颈更多地源于程序设计和代码实现方式的不当。因此,培养良好的编码习惯不仅…...
CVE-2022-24652 漏洞复现
CVE-2022-24652 开题 后台管理是thinkphp的,但是工具没检测出漏洞。 登陆后界面如下,上传头像功能值得引起注意 这其实就是CVE-2022-24652,危险类型文件的不加限制上传,是文件上传漏洞。漏洞路由/user/upload/upload 参考文章&a…...
LeetCode、338. 比特位计数【简单,位运算】
文章目录 前言LeetCode、338. 比特位计数【中等,位运算】题目链接与分类思路位运算移位处理前缀思想实现 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java…...
借助Aspose.BarCode条码控件,C# 中的文本转 QR 码生成器
二维码用于在较小的空间内存储大量数据。它们易于使用,可以通过智能手机或其他设备扫描来打开网站、观看视频或访问其他编码信息。在这篇博文中,我们将学习如何使用 C# 以编程方式生成基于文本的 QR 码。我们将提供分步指南和代码片段,帮助您…...
vue打包优化,webpack的8大配置方案
vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情。这里我们希望它可以压缩代码体积,提高运行效率。 文章目录 (1)代码压缩:(2)图片压缩:&…...
B端系统从0到1:有几步,其中需求分析要做啥?
一款B系统从无到有都经历了啥,而其中的需求分析又要做什么?贝格前端工场给老铁们做一下分析,文章写作不易,如果咱们有界面设计和前端开发需求,别忘了私信我呦,开始了。 一、B端系统从0到1都有哪些要走的步骤…...
django中查询优化
在Django中,查询优化是一个重要的主题,因为不正确的查询可能会导致性能问题,尤其是在处理大量数据时。以下是一些在Django中进行查询优化的建议: 一:使用select_related和prefetch_related: select_related用于优化一…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
