news 2026/1/17 8:19:49

原型链简易了解

作者头像

张小明

前端开发工程师

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/1/10 10:42:24

速藏!AI大模型工程师进阶手册:从入门到实战的全攻略

在大模型技术“普惠化”的今天,越来越多程序员和技术小白意识到:与其纠结“大模型会不会取代我”,不如成为“驾驭大模型的人”。AI大模型应用开发工程师这一职业,正是为拥抱这场技术变革而生——他们不依赖高深的算法研究&#xf…

作者头像 李华
网站建设 2026/1/16 16:22:30

NVIDIA Profile Inspector终极优化指南:解锁显卡隐藏性能

NVIDIA Profile Inspector终极优化指南:解锁显卡隐藏性能 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 如何突破显卡性能瓶颈,让游戏体验更上一层楼?NVIDIA Profil…

作者头像 李华
网站建设 2026/1/9 2:00:24

LobeChat能否对接古籍数据库?中华传统文化智能问答系统

LobeChat能否对接古籍数据库?中华传统文化智能问答系统 在博物馆的互动展区,一个孩子指着展板上的古文问:“‘天下兴亡,匹夫有责’是谁说的?”旁边的父亲尝试用手机搜索,结果跳出来的答案五花八门——有人说…

作者头像 李华
网站建设 2026/1/16 13:55:18

微信多设备登录难题的终极解决方案

微信多设备登录难题的终极解决方案 【免费下载链接】WeChatPad 强制使用微信平板模式 项目地址: https://gitcode.com/gh_mirrors/we/WeChatPad 你是否曾经因为微信只能在一个设备上登录而感到困扰?当你需要在手机和平板之间切换使用时,不得不反复…

作者头像 李华
网站建设 2026/1/16 22:32:30

PlayCover深度解密:在Mac上畅享iOS应用的终极方案

PlayCover深度解密:在Mac上畅享iOS应用的终极方案 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover 还在为Apple Silicon Mac无法体验心仪iOS应用而烦恼?想要在大屏幕上享受移动应…

作者头像 李华