前端八股之JS的原型链

1.原型的定义

每一个对象从被创建开始就和另一个对象关联,从另一个对象上继承其属性,这个另一个对象就是 原型

当访问一个对象的属性时,先在对象的本身找,找不到就去对象的原型上找,如果还是找不到,就去对象的原型(原型也是对象,也有它自己的原型)的原型上找,如此继续,直到找到为止,或者查找到最顶层的原型对象中也没有找到,就结束查找,返回undefined

这条由对象及其原型组成的链就叫做原型链。

总结:

  1. 原型存在的意义就是组成原型链:引用类型皆对象,每个对象都有原型,原型也是对象,也有它自己的原型,一层一层,组成原型链。
  2. 原型链存在的意义就是继承:访问对象属性时,在对象本身找不到,就在原型链上一层一层找。说白了就是一个对象可以访问其他对象的属性。
  3. 继承存在的意义就是属性共享:好处有二:一是代码重用,字面意思;二是可扩展,不同对象可能继承相同的属性,也可以定义只属于自己的属性。

2.原型链定义

每个对象都有一个内部属性 [[Prototype]](可通过 __proto__ 访问),这个[[Prototype]]指向它的原型对象(prototype),这个原型对象也有自己的 __proto__,一直向上查找,最终到达终点null,形成原型链

总结:

  1. 对象有__proto__属性,函数有__proto__属性,数组也有__proto__属性,只要是引用类型,就有__proto__属性,指向其原型。
  2. 只有函数有prototype属性,只有函数有prototype属性,只有函数有prototype属性,指向new操作符加调用该函数创建的对象实例的原型对象。

实例代码

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, I'm " + this.name);
};const p = new Person("Alice");p.sayHello(); // 从 p 找不到 sayHello,顺着原型链找到 Person.prototype

p --> Person.prototype --> Object.prototype --> null

  • p.__proto__ === Person.prototype

  • Person.prototype.__proto__ === Object.prototype

  • Object.prototype.__proto__ === null

3.constructor

构造函数都有一个prototype属性,指向使用这个构造函数创建的对象实例的原型对象

这个原型对象中默认有一个constructor属性,指回该构造函数。

Person.prototype.constructor === Person // true

4.应用

①.手写实现instanceof

function instanceof2(L, R) {// 获取 R 的 prototype.//R 是构造函数,我们要找的是它的 .prototype,这是构造出来对象的原型。let RP = R.prototype;// 获取 L 的原型//取 L 的原型(注意是 __proto__,而不是 prototype),它表示当前对象的内部原型链引用。L = L.__proto__;// 遍历 L 的原型链while (true) {if (L === null) { // 到头了都没找到,说明不是return false;}// 🔽 插入这行代码if (L === RP) {  // 找到了原型链中有构造函数的 prototypereturn true;}L = L.__proto__;  // 继续向上查找原型链}
}
  • instanceof 的本质:判断某对象的原型链上是否能找到构造函数的 .prototype
  • __proto__ 是对象的内部原型引用。

  • 可以用 Object.getPrototypeOf(obj) 来代替 __proto__(更标准)。

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

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

相关文章

kafka命令

kafka安装先安装zookeeper,jdk 确保jdk版本与kafka版本匹配: 先启动zookeeper: # 启动独立安装的zookeeper ./zkServer.sh start # 也可以自动kafka自带的zookerper ./zookeeper-server-start.sh ../config/zookeeper.pr…

微服务面试(分布式事务、注册中心、远程调用、服务保护)

1.分布式事务 分布式事务,就是指不是在单个服务或单个数据库架构下,产生的事务,例如: 跨数据源的分布式事务跨服务的分布式事务综合情况 我们之前解决分布式事务问题是直接使用Seata框架的AT模式,但是解决分布式事务…

Linux --进程优先级

概念 什么是进程优先级,为什么需要进程优先级,怎么做到进程优先级这是本文需要解释清楚的。 优先级的本质其实就是排队,为了去争夺有限的资源,比如cpu的调度。cpu资源分配的先后性就是指进程的优先级。优先级高的进程有优先执行的…

React 性能监控与错误上报

核心问题与技术挑战 现代 React 应用随着业务复杂度增加,性能问题和运行时错误日益成为影响用户体验的关键因素。没有可靠的监控与错误上报机制,我们将陷入被动修复而非主动预防的困境。 性能指标体系与错误分类 关键性能指标定义 // performance-me…

芒果深度学习检测:开启农业新视界(猫脸码客第230期)

芒果深度学习检测:开启农业新视界 一、引言 芒果作为热带水果中的“明星”,在全球水果市场占据着重要地位,拥有广泛的市场需求和可观的经济价值。伴随人们生活品质的提升,对芒果品质的要求也愈发严苛。芒果产业规模持续扩张&#…

PDF文件转换之输出指定页到新的 PDF 文件

背景 一份 PDF 学习资料需要打印其中某几页,文件有几百兆,看到 WPS 有PDF拆分功能,但是需要会员,开了一个月会员后完成了转换。突然想到,会员到期后如果还要拆解的话,怎么办呢?PDF 文件拆解功能…

【计网】SW、GBN、SR、TCP

目录 三种可靠传输机制(数据链路层) 停止-等待(Stop and Wait,SW)协议 回退N帧(Go-back-N,GBN)协议 选择重传(Selective Repeat,SR)协议 传输…

Go的隐式接口机制

正确使用Interface 不要照使用C/Java等OOP语言中接口的方式去使用interface。 Go的Interface的抽象不仅可以用于dynamic-dispatch 在工程上、它最大的作用是:隔离实现和抽象、实现完全的dependency inversion 以及interface segregation(SOLID principle中的I和D)。…

Async-profiler 内存采样机制解析:从原理到实现

引言 在 Java 性能调优的工具箱中,async-profiler 是一款备受青睐的低开销采样分析器。它不仅能分析 CPU 热点,还能精确追踪内存分配情况。本文将深入探讨 async-profiler 实现内存采样的多种机制,结合代码示例解析其工作原理。 为什么需要内…

Android 颜色百分比对照

本文就是简单写个demo,打印下颜色百分比的数值.方便以后使用. 1: 获取透明色 具体的代码如下: /*** 获取透明色* param percent* param red* param green* param blue* return*/public static int getTransparentColor(int percent, int red, int green, int blue) {int alp…

MPLS-EVPN笔记详述

目录 EVPN简介: EVPN路由: 基本四种EVPN路由 扩展: EVPN工作流程: 1.启动阶段: 2.流量转发: 路由次序整理: 总结: EVPN基本术语: EVPN表项: EVPN支持的多种服务模式: 简介: 1.Port Based: 简介: 配置实现: 2.VLAN Based: 简介: 配置实现: 3.VLAN Bundle: 简…

SpringBoot自定义线程池详细教程

文章目录 1. 线程池基础概念1.1 什么是线程池1.2 Java线程池核心参数1.3 线程池执行流程 2. SpringBoot中的线程池2.1 SpringBoot默认线程池2.2 SpringBoot异步任务基础 3. 自定义线程池配置3.1 配置文件方式3.2 Java配置方式3.3 线程池工厂配置 4. 异步任务实际应用4.1 业务服…

智能快递地址解析接口如何用PHP调用?

一、什么是智能快递地址解析接口 随着互联网技术的普及和电子商务的迅猛发展,网购已成为现代人日常生活的重要组成部分。然而,在这个便捷的背后,一个看似不起眼却影响深远的问题正悄然浮现——用户填写的快递地址格式混乱、信息不全甚至错漏…

概率分布,支撑AI算法的数学基石

概率分布,是现代人工智能(AI)算法不可或缺的数学语言。它不仅描述了数据中的不确定性,更揭示了机器学习模型背后的本质运作机制。本文将带你深入了解概率分布的数学本质,以及它在监督学习、深度学习、生成模型等核心AI领域的关键作用,揭秘概率论如何成为AI理论和实践的强…

2025年Splunk的替代方案:更智能的安全选择

在安全信息和事件管理(SIEM)领域,2025年的竞争愈发激烈。Splunk凭借其强大的功能和稳定性长期占据市场主导地位,但其高昂的成本、复杂性和扩展性挑战促使许多企业转向其他解决方案。无论是初创公司、快速发展的中型企业&#xff0…

(10)Fiddler抓包-Fiddler如何设置捕获Firefox浏览器的Https会话

1.简介 经过上一篇对Fiddler的配置后,绝大多数的Https的会话,我们可以成功捕获抓取到,但是有些版本的Firefox浏览器仍然是捕获不到其的Https会话,需要我们更进一步的配置才能捕获到会话进行抓包。 2.环境 1.环境是Windows 10版…

simulink mask的使用技巧

1.mask界面布局 1.1如何调整控件的位置和控件大小? 反正2020a是调不了, 找了好久,只能是调布局,例如你要调成下面这样: 第一个控件的iTem location属性选择New row 后面跟着的几个和第一个同一行的空间属性选择Cu…

Go中MAP底层原理分析

MAP底层原理分析 参考 https://golang.design/go-questions/map/principalmap | Golang 中文学习文档 先来看一下map结构体,(runtime.hmap结构体就是代表着 go 中的map,与切片一样map的内部实现也是结构体) type hmap struct {/…

#开发环境篇:postMan可以正常调通,但是浏览器里面一直报403

本地header代理下面内容即可 headers: { // 添加必要的请求头 ‘Host’: ‘服务端域名’, ‘Origin’: https://服务端域名, ‘Referer’: https://服务端域名 }, devServer: {// 本地开发代理API地址proxy: {^/file: {target: https://服务端域名,changeOrigin: true, // 是否…

【论文阅读 | PR 2024 |ICAFusion:迭代交叉注意力引导的多光谱目标检测特征融合】

论文阅读 | PR 2024 |ICAFusion:迭代交叉注意力引导的多光谱目标检测特征融合 1.摘要&&引言2.方法2.1 架构2.2 双模态特征融合(DMFF)2.2.1 跨模态特征增强(CFE)2.2.2 空间特征压缩(SFS)…