(原型与原型链)前端八股文修炼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.rhkb.cn/news/292136.html

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

相关文章

C# 微软官方学习文档

链接:https://learn.microsoft.com/zh-cn/dotnet/csharp/ 在C#的学习过程中,我们可以参考微软官方的学习文档。它是一个免费的学习平台,提供了丰富的C#学习路径和教程(如下图),对我们入门到高级应用开发都…

汇总:五个开源的Three.js项目

Three.js 是一个基于 WebGL 的 JavaScript 库,它提供了一套易于使用的 API 用来在浏览器中创建和显示 3D 图形。通过抽象和简化 WebGL 的复杂性,Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。 T…

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱(以 Integer 包装类为例) 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗? 前言 小伙伴们大家好,日常使用业务层方面的代码居多,但也不可忘了基本的一些代码格式以及原…

npm淘宝镜像源更新

目录 前情提要: 背景: 镜像源更新: 清楚缓存: 直接切换镜像源: 注:npm 补充: 错误解释: 解决方法: 前情提要: 2024 /1 /22 ,registry.npm…

理解游戏服务器架构-逻辑底层架构

目录 前言 什么是逻辑底层架构 逻辑底层架构的职责 1)Thread-线程 线程管理 线程通讯 线程安全锁机制 2)Network-网络 网络模型 网络消息协议 断线重连 网络安全 防范重复消息 防范篡改消息内容 防范篡改内存数据 网络承载 3&#xff0…

HarmonyOS 应用开发之FA模型启动Stage模型UIAbility

本文介绍FA模型的三种应用组件如何启动Stage模型的UIAbility组件。 PageAbility启动UIAbility 在PageAbility中启动UIAbility和在PageAbility中启动PageAbility的方式完全相同。 import featureAbility from ohos.ability.featureAbility; import { BusinessError } from oh…

阿里云2核4G服务器租用价格,支持多少人在线?

阿里云2核4G服务器多少钱一年?2核4G配置1个月多少钱?2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

YOLOv9改进策略 :主干优化 | ConvNeXtV2:适应自监督学习,让 CNN “再一次强大”?

💡💡💡本文改进内容:完全卷积掩码自编码器框架 ConvNeXt V2,它显著提高了纯convnet在各种识别基准上的性能,包括ImageNet分类,COCO目标检测和ADE20k分割。还提供了各种尺寸的预训练ConvNeXt v2模型,从而在ImageNet上具有76.7%精度的3.7M Atto model和88.9%精度的650…

理解游戏服务器架构-部署架构

目录 前言 我所理解的服务器架构 什么是否部署架构 部署架构的职责 进程业务职责 网络链接及通讯方式 与客户端的连接方式 服务器之间连接关系 数据落地以及一致性 数据库的选择 数据访问三级缓存 数据分片 读写分离 分布式数据处理 负载均衡 热更新 配置更新 …

Unity 基于Rigidbody2D模块的角色移动

制作好站立和移动的动画后 控制器设计 站立 移动 角色移动代码如下: using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine;public class p1_c : MonoBehaviour {// 获取动画组件private Animator …

zabbix主动发现,注册及分布式监控

主动发现 结果 主动注册 结果 分布式监控 服务机:132 代理机:133 客户端:135 代理机 数据库赋权: 代理机配置 网页上配置代理 客户端配置 网页上配置主机 重启代理机服务 网页效果

牛客周赛 Round 38(A,B,C,D,E,F,G)

比赛链接 官方讲解(不分P不分段直接两小时怼上来是坏文明 ) 这场的题很棒,思维有难度,考察的知识点广泛,有深度,很透彻。感觉学到了很多。建议补题。 A 小红的正整数自增 思路: 签到。 可以…

使用 golang 以及 Gin 框架,将上传的图片在不保存至本地的情况下添加水印,并上传至阿里云 OSS

正如标题所述,使用golang对上传图片添加水印,以及将图片上传到阿里云OSS,网上一搜索,便有你想要的结果了,可是,他们却先将上传图片添加水印后保存在本地,而后再将添加了水印的图片上传到阿里云O…

【I.MX6ULL移植】Ubuntu-base根文件系统移植

1.下载Ubuntu16.04根文件系统 http://cdimage.ubuntu.com/ 1 2 3 4 5 2.解压ubuntu base 根文件系统 为了存放 ubuntu base 根文件系统,先在 PC 的 Ubuntu 系统中的 nfs 目录下创建一个名为 ubuntu_rootfs 的目录,命令如下: 【注意&…

【3D-GS】Gaussian Splatting SLAM——基于3D Gaussian Splatting的全网最详细的解析

【3D-GS】Gaussian Splatting SLAM——基于3D Gaussian Splatting的定SLAM 3D-GS 与 Nerf 和 Gaussian Splatting1. 开山之作 Nerf2. 扛鼎之作 3D Gaussian Splatting2.1 什么是3D高斯?高斯由1D推广到3D的数学推导2.2 什么是光栅化?2.3 什么是Splatting?2.4 什么是交叉优化?…

激发数据潜力:企业数据中台的策略性构建与优化_光点科技

在信息时代,数据是企业价值链中不可或缺的一环。构建一个策略性的企业数据中台不仅能够整合分散的数据资源,还能提高决策效率和业务敏捷性。本文聚焦于如何策略性地构建和优化数据中台,以便企业能够最大化地利用数据资源,推动企业…

国产AI大模型推荐(一)

文心一言 主要功能: 各种类型的问答、各种文本创作、推理与数学计算、写代码、聊天交流、图片生成等。 链接:文心一言 讯飞星火 特点: 内容生成能力:我可以进行多风格多任务长文本生成,例如邮件、文案、公文、作文、对…

【一】DDR3基础知识与IMG IP

【一】DDR3基础知识与IMG IP 一、DDR3的基本知识 1、DDR3全称为第三代双倍速率同步动态随机存储器 特点:掉电无法保存数据,需要周期性的刷新;时钟上升沿和下降沿都在传输数据;突发传输,突发长度burtst length一般为…

uniapp 微信小程序 canvas 手写板文字重复倾斜水印

核心逻辑 先将坐标系中心点通过ctx.translate(canvasw / 2, canvash / 2) 平移到canvas 中心,再旋转设置水印 假如不 translate 直接旋转,则此时的旋转中心为左上角原点,此时旋转示意如图所示 当translate到中心点之后再旋转,此…

大语言模型---强化学习

本文章参考,原文链接:https://blog.csdn.net/qq_35812205/article/details/133563158 SFT使用交叉熵损失函数,目标是调整参数使模型输出与标准答案一致,不能从整体把控output质量 RLHF(分为奖励模型训练、近端策略优化…