news 2026/6/10 14:37:08

原型链简易了解

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
原型链简易了解

后面会出几篇自定义补环境框架的文章,在讲解环境框架之前,需要对原型链有简单的了解

相信有不少人有一个误区,觉得手补环境才是最好的,因为灵活方便,不想使用补环境框架,因为复杂。

其实根本原因归结于过于依赖吐环境代理,吐环境代理并不万能,很多时候很多环境并不能吐出业务代码真正执行的流程,甚至有时吐出的代理会让你走进错误分支。首先任何业务代码都要遵循加密执行逻辑,而不是吐什么补什么,谨住这一点!!

首先何为原型链,是指将一个对象指向另一个对象,通过使用obj.__proto__ 或 Object.getPrototypeOf(obj)能看导其结构

比如document.__proto__是HTMLDocument

而HTMLDocument的__proto__是Document

Document的__proto__是Node

Node的__proto__是EventTarget

这种层层相连的关系就是原型链,值得注意的是,下级可以继承上级对象的属性,而上级不能使用下级的自身属性

比如你们常见的addEventListener事件是EventTarget的属性,而继承EventTarget对象的Node, Document, HTMLDocument, document都能调用addEventListener

很好理解吧?你们手补的document对象补addEventListener方法,然后又在windows对象手补addEventListener方法,这种东凑西补的方法,当遇到了补环境要求特别高的代码,会补的眼花缭乱,混乱复杂。

那我们在nodejs中,为了完全模拟伪造这种原型链,代码如下:

EventTarget = function EventTarget() {}; EventTarget.prototype.addEventListener = function addEventListener() {}; Node = function Node() {}; Object.setPrototypeOf(Node.prototype, EventTarget.prototype) Document = function Document() {}; Object.setPrototypeOf(Document.prototype, Node.prototype) HTMLDocument = function HTMLDocument() {}; Object.setPrototypeOf(HTMLDocument.prototype, Document.prototype) document = {}; Object.setPrototypeOf(document, HTMLDocument.prototype) console.log(document) console.log(document.addEventListener)

看,这就成功初步模拟伪造了浏览器环境 关于toString检测又是怎么过呢?

这是浏览器环境

这是nodejs的

最简单的做法是

document.toString = function (){

return '[object HTMLDocument]'

}

document.addEventListener.toString = function (){

return 'function addEventListener() { [native code] }'

}

这样就把toString检测过了。当然了,正常肯定不是这样补的 这种做法太过儿科了 至于属性描述符检测,不用过多赘述了 了解完原型链之后,就算成功摸入创建自定义环境环境的门槛了,后面有时间再出如何自定义环境框架的文章

感兴趣的联系我,加入知识星球

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 16:21:06

无锡黑锋 HF5903 40V热插拔、50V耐压、可调限流保护开关技术解析

一、芯片核心定位HF5903 是一款在引脚定义上与HF5805存在差异,但核心功能与性能参数高度相似的 高压保护前端开关IC 其核心价值同样在于 50V的输入瞬态耐压、40V的热插拔能力 以及 通过外部电阻可编程的过流保护 专为 便携设备充电端口 提供 抗高压冲击、防过流、防…

作者头像 李华
网站建设 2026/6/10 15:26:44

MusicFree插件深度解析:打造专属音乐空间的终极指南

MusicFree插件深度解析:打造专属音乐空间的终极指南 【免费下载链接】MusicFreePlugins MusicFree播放插件 项目地址: https://gitcode.com/gh_mirrors/mu/MusicFreePlugins MusicFree插件系统为用户提供了强大的个性化音乐体验,通过插件扩展功能…

作者头像 李华
网站建设 2026/6/10 0:52:50

六音音源完整修复指南:5分钟解决洛雪音乐播放问题

六音音源完整修复指南:5分钟解决洛雪音乐播放问题 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 还在为洛雪音乐升级后无法播放歌曲而烦恼吗?六音音源修复版为您提供终极…

作者头像 李华
网站建设 2026/6/10 12:44:55

LobeChat能否支持白板协作?多人协同编辑功能设想

LobeChat能否支持白板协作?多人协同编辑功能设想 在远程办公常态化、团队知识密度不断提升的今天,AI 聊天工具早已不再只是“问答助手”那么简单。越来越多的团队希望在一个统一界面中完成从创意发散、方案讨论到内容输出的全流程——而不仅仅是来回发送…

作者头像 李华
网站建设 2026/6/10 15:02:11

K8s 中的 CoreDNS 组件

在 Kubernetes 集群中,服务发现是核心功能之一,而 CoreDNS 作为 Kubernetes 集群的 DNS 解析组件,承担着内部域名解析的重要职责。本文将详细介绍 CoreDNS 的工作原理、配置方式以及实际应用场景。一、Kubernetes 服务发现方式Kubernetes 提供…

作者头像 李华
网站建设 2026/6/10 9:14:23

BilibiliVideoDownload:跨平台B站视频离线下载完整指南

想要随时观看B站视频而不用担心网络问题?BilibiliVideoDownload正是你需要的解决方案。这款开源桌面应用让你能够轻松下载B站视频到本地,实现真正的离线观看体验。 【免费下载链接】BilibiliVideoDownload 项目地址: https://gitcode.com/gh_mirrors/…

作者头像 李华