news 2026/7/31 16:27:16

原型链简易了解

作者头像

张小明

前端开发工程师

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/7/30 2:07:53

ThinkPad风扇控制终极解决方案:彻底告别噪音困扰

还在为ThinkPad风扇突然狂转而影响工作专注度而烦恼吗?当你正在进行重要会议或深夜加班时,那刺耳的风扇噪音是否让你备受困扰?TPFanCtrl2正是为解决这一痛点而生的智能风扇控制工具,通过革命性的控制算法,让你的ThinkP…

作者头像 李华
网站建设 2026/7/30 4:03:10

高效集成秘籍:LobeChat对接私有化大模型全流程

高效集成秘籍:LobeChat对接私有化大模型全流程 在企业AI落地的浪潮中,一个现实问题日益凸显:如何在保障数据安全的前提下,让员工真正用上智能助手?许多团队尝试过公有云大模型,却因敏感信息外泄风险被叫停&…

作者头像 李华
网站建设 2026/7/31 3:29:36

【关注可白嫖源码】-家政服务管理系统

一、开发背景上班族家庭:由于工作繁忙,无暇顾及家务,对日常保洁、家电清洗等便捷高效的家政服务需求强烈,希望能够通过简单的操作,在合适的时间预约到专业的家政人员上门服务,并且对服务质量和服务人员的专…

作者头像 李华
网站建设 2026/7/30 5:36:09

揭秘纪念币预约自动化工具:轻松实现90%成功率的终极攻略

揭秘纪念币预约自动化工具:轻松实现90%成功率的终极攻略 【免费下载链接】auto_commemorative_coin_booking 项目地址: https://gitcode.com/gh_mirrors/au/auto_commemorative_coin_booking 还在为抢不到纪念币而烦恼吗?纪念币预约自动化工具正…

作者头像 李华
网站建设 2026/7/31 4:32:00

Unity游戏翻译工具使用全攻略:零基础快速上手XUnity.AutoTranslator

Unity游戏翻译工具使用全攻略:零基础快速上手XUnity.AutoTranslator 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 作为Unity游戏玩家,你是否曾经因为语言障碍而无法享受心仪的日…

作者头像 李华