(原型与原型链)前端八股文修炼Day5

在这里插入图片描述

一 原型链的理解

  1. 原型链定义
    原型链是 JavaScript 中实现对象继承的关键机制之一,它是一种对象之间的关系,通过这种关系,一个对象可以继承另一个对象的属性和方法。

  2. 原型链的组成
    每个对象都有一个指向另一个对象的内部链接(-proto-),即原型对象。如果在当前对象上无法找到属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到对应的属性或方法。

  3. 原型对象和构造函数
    在 JavaScript 中,通过构造函数创建的对象实例会关联到构造函数的 prototype 属性指向的对象。这样,实例可以通过原型链访问构造函数的原型对象上定义的属性和方法。

  4. 顶端的原型
    所有对象的原型链的顶端是 Object.prototype,它是 JavaScript 中所有对象的基础原型,包含一些常用的方法(比如 toString()hasOwnProperty() 等)。

  5. 原型链的作用
    原型链使得对象之间可以共享属性和方法,实现了高效的代码复用和继承。通过原型链,我们可以更灵活地组织和扩展对象的功能。

  6. 示例解释
    举例说明原型链的作用和实现方式,比如创建一个自定义构造函数、定义其原型对象上的方法,以及如何通过原型链访问这些方法。例如:

  • prototype: 所有的函数类型天生都自带一个属性:prototype(原型),这个属性的值是一个对象 ,浏览器默认会给它开辟一个堆内存;
  • constructor: 在浏览器给prototype开辟的堆内存中有一个天生自带的属性:constructor,这个属性存储的值是当前的函数本身。
  • -proto-: 每一个对象都有一个_-proto-_的属性,这个属性指向当前实例所属类的prototype。如果不确定它是谁的实例,那么都为Object的实例。
  • 原型链机制:通过__proto__隐式原型链向上查找的机制;
  • 向上查找:当我们操作实例的某个属性或者方法的时候,首先找自己空间中私有的属性和方法;
    • 若找到,结束查找,使用自己私有的即可
    • 若没找到,则基于__proto__找所属类的prototype,如果找到就用共有的,如果没找到,基于原型上的__proto__进行查找,一直找到Object.prototype的原型为止,如果还是没有,操作的属性或者方法不存在。
      图解如下:
      在这里插入图片描述

二 原型修改

在 JavaScript 中,原型链的理解是非常重要的,特别是在处理对象继承和原型链修改时。让我来解释一下原型修改、重写原型链以及原型链指向的终点:

  1. 原型修改
    在 JavaScript 中,可以通过修改对象的原型对象来改变对象的行为。这意味着可以向原型对象添加新属性或方法,从而让所有基于该原型对象创建的实例都能访问到这些属性或方法。原型修改是一种扩展对象功能的有效方法。

  2. 重写原型链
    重写原型链指的是将一个对象的原型对象指向另一个对象,从而改变对象的原型链。这样做可以实现对象之间的继承关系重组,让一个对象继承另一个对象的属性和方法。

  3. 原型链的终点
    原型链的终点是指原型链的最顶层,即所有对象原型链的顶端都指向的对象。在 JavaScript 中,原型链的终点是 Object.prototype,它是所有对象的基础原型,包含一些通用的方法,比如 toString()hasOwnProperty() 等。

当我们访问一个对象的属性或方法时,JavaScript 引擎会沿着原型链向上查找,直到找到对应的属性或方法或者查找到达原型链的终点为止。如果在整个原型链中都找不到对应的属性或方法,操作就会失败。

通过修改原型对象或重写原型链,我们可以实现对象之间的继承和共享属性方法,从而达到增强对象功能的目的。同时,了解原型链的终点有助于我们理解 JavaScript 对象之间的关系以及属性方法的查找顺序。
继承的实现可参考

三 如何打出原型链的终点

要打印出原型链的终点,你可以使用以下代码来获取原型链终点所指向的对象:

function getPrototypeChainEnd(obj) {let currentObj = obj;while(Object.getPrototypeOf(currentObj) !== null) {currentObj = Object.getPrototypeOf(currentObj);}return currentObj;
}// 示例:打印出原型链的终点
console.log(getPrototypeChainEnd(Object.prototype)); // 输出:Object {}

在这段代码中,getPrototypeChainEnd 函数接收一个对象作为参数,然后通过迭代查找对象的原型链,直到找到原型链的终点。最后,返回原型链的终点对象。

你可以替换 Object.prototype 为任何你想要查看原型链终点的对象。这段代码会帮助你打印出原型链的终点对象。希望这能解决你的问题!如果有任何其他问题,请随时告诉我。

四 如何获取非原型链上的属性

要获取对象自身拥有的属性(即非原型链上的属性),可以使用 Object.keys() 方法来获取对象的所有可枚举属性,然后过滤掉原型链上的属性。以下是一个简单的示例代码:

function getOwnProperties(obj) {return Object.keys(obj).filter(key => obj.hasOwnProperty(key));
}// 示例:获取对象非原型链上的属性
const obj = {a: 1,b: 2
};// 向原型添加属性
Object.prototype.c = 3;const ownProperties = getOwnProperties(obj);
console.log(ownProperties); // 输出: ["a", "b"]

在这个示例中,getOwnProperties 函数接收一个对象作为参数,使用 Object.keys() 方法获取对象的所有属性名,然后通过 hasOwnProperty() 方法过滤掉原型链上的属性,最终返回对象自身拥有的属性名数组。

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

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

相关文章

Vue3尚硅谷张天禹笔记

1. Vue3简介 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(n 经历了:4800次提交、40个RFC、600次PR、300贡献者 官方发版地址:Release v3.0.0 One Piece vuejs/core 截止2023年10月,最…

每日一题 --- 删除链表的倒数第 N 个结点[力扣][Go]

删除链表的倒数第 N 个结点 题目:19. 删除链表的倒数第 N 个结点 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2&#x…

zotero+word优化管理参考文献

写论文,整理参考文献,管理参考文献很麻烦,参考文献格式罗列很麻烦,论文需要修改时,重新调整参考文献顺序很麻烦。 zoteroword可以很好的帮助解决这个问题。 Step1 zotero软件安装 默认word你已经安装好了 step2 安…

linux下的打包/解包命令(tar,zip/unzip)

目录 打包/解包 作用 zip -r选项 unzip -d选项 如果不使用递归压缩 -l / -v选项 tar 介绍 选项 示例 打包/解包 作用 使多个文件变成一个文件,不易造成数据缺失使下载时间变短 zip 将目录或文件压缩成zip格式 -r选项 递归式压缩某目录及其所有子目录中的文件 如果不…

有效三角形的个数【双指针】

1.优化版暴力求解 如果能构成三⻆形,需要满⾜任意两边之和要⼤于第三边。实际上只需让较⼩的两条边之和⼤于第三边即可。将原数组排序,从⼩到⼤枚举三元组,这样三层 for 循环枚举出的三元组只需判断较⼩的两条边之和是否⼤于第三边。 class…

Qt开发(2)——在已有VS项目中配置Qt

在之前的Qt开发学习中,基本都是在Qt Creator中创建一个Qt项目,或者即便是在VS中也是直接新建一个Qt项目。但很少有记录如何在已有的C项目中添加Qt,这就好比我有个项目已经开发完了,现在又说加个Qt界面的功能。这篇文章就是记录如何在已有项目…

那如何解决信创设配问题呢?怎么成为信创产品?

信创也好、国产化也好都是国家部署的重点工作,所有涉及到的相关行业和部门都必须坚持执行和并且要执行好的重点任务,这一点无容置疑。在信息化层面,随着我国基础水平(芯片、OS、DB、中间件)的提升,信创工作…

臻奶惠:无人售货奶柜,让纯净营养触手可及

臻奶惠:无人售货奶柜,让纯净营养触手可及 在这个快速发展的时代,每一个创新都在为生活带来便捷和品质的提升。臻奶惠深谙此道,特推出无人售货奶柜,将健康营养与现代科技完美融合,为您和家人提供24小时不间…

如何让笔记本电脑发挥120%的性能?原来还有这种小技巧

前言 现在的笔记本电脑性能真的是越来越好了!但笔记本的CPU终究受到功耗的限制,与同代的台式机CPU性能相差不是一点半点的。 小白在之前很长一段时间也是使用着Windows系统的笔记本,也见过不下百款笔记本。 笔记本为了轻便,通常…

逐步学习Go-并发通道chan(channel)

概述 Go的Routines并发模型是基于CSP,如果你看过七周七并发,那么你应该了解。 什么是CSP? "Communicating Sequential Processes"(CSP)这个词组的含义来自其英文直译以及在计算机科学中的使用环境。 CSP…

SpringBoot整合Swagger-UI实现在线API文档

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:SpringBoot整合Swagger-UI实现在线API文档 📚个人知识库: Leo知识库,欢迎大…

YOLOv9改进策略:卷积魔改 | DCNv2升级版本,助力检测

💡💡💡本文改进内容:在DCN的基础上,增加了2个创新点,分别是调制模块和使用多个调制后的DCN模块,从形成了DCN的升级版本——DCNv2 💡💡💡如何使用&#xff1a…

红岩思维导图的制作软件,分享4款热门的!

红岩思维导图的制作软件,分享4款热门的! 在当今信息爆炸的时代,思维导图作为一种有效的知识整理和思维拓展工具,受到了广大用户的青睐。红岩思维导图以其独特的风格和实用性,成为了许多人学习和工作中的得力助手。那么…

【SpringSecurity】基础入门

目录 权限管理什么是权限管理认证授权权限管理解决方案Shiro开发者自定义Spring Security Spring Security特性Spring、Spring Boot 和 Spring Security 三者的关系整体架构1.认证AuthenticationManagerAuthenticationSecurityContextHolder 2.授权AccessDecisionManagerAccess…

作为数据分析师,如何能把AI工具和数据分析工作更好的结合?

在当今信息爆炸的时代,数据已经成为企业、研究机构乃至个人决策的重要依据。然而,如何高效地处理、分析和解读这些数据,从而提炼出有价值的信息,却成为了一个亟待解决的问题。 幸运的是,随着人工智能技术的飞速发展&a…

二叉树|450.删除二叉搜索树中的节点

力扣题目链接 class Solution { public:TreeNode* deleteNode(TreeNode* root, int key) {if (root nullptr) return root; // 第一种情况:没找到删除的节点,遍历到空节点直接返回了if (root->val key) {// 第二种情况:左右孩子都为空&…

【WEEK4】 【DAY5】AJAX第二部分【中文版】

2024.3.22 Friday 接上文【WEEK4】 【DAY4】AJAX第一部分【中文版】 目录 8.4.Ajax异步加载数据8.4.1.新建User.java8.4.2.在pom.xml中添加lombok、jackson支持8.4.3.更改tomcat设置8.4.4.修改AjaxController.java8.4.5.新建test2.jsp8.4.5.1.注意:和WEB-INF平级&…

一文解析:固定电感器结构、作用及其与扼流圈和可变电感器的差异

固定电感器是一种电子元件又称固定线圈,用于在电路中产生固定的电感值。电感是指导致电流变化时产生电动势的能力,通常用亨利(Henry)作为单位。固定电感器的电感值是预先确定的,通常以特定的数值标识,例如1…

【正点原子FreeRTOS学习笔记】————(10)FreeRTOS时间管理

这里写目录标题 一、延时函数介绍(了解)二、延时函数解析(熟悉)三、延时函数演示实验(掌握) 一、延时函数介绍(了解) 相对延时:指每次延时都是从执行函数vTaskDelay()开始…

onnxruntime 中的 Gather 算子

上一篇文章中介绍了 Division by Invariant Integers using Multiplication 的原理,很多框架均才用该算法优化除法运算。onnxruntime 是已知实现中最为简洁的,因此本文结合 onnxruntime 的 Gather 实现进行介绍。 Gather 算子是一个索引类算子&#xff0…