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 11:09:20

汇川中型 PLC 纯 ST 语言双轴同步设备开发:初学者的友好指南

汇川中型plc+纯ST语言双轴同步设备,程序中没有使用任何库文件,纯原生codesys功能块。 非常适合初学入门者,三个虚拟驱动模拟虚主轴和两个伺服从轴,只要手里有汇川AM400,600,AC700,800即可实际运行该项目程序…

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

【大前端】【Android】 Android 手机上导出已安装 App 的 APK

根据是否有 root / adb / 仅手机操作,常见有 4 种靠谱方式。按「实用度 成本」整理👇一、最推荐:ADB 导出(无需 Root,最稳定)⭐️适合开发者、抓包、逆向、分析三方 APK1️⃣ 开启 USB 调试设置 → 关于手…

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

Anthropic重磅新研究:当AI采访了1250人,它看见了人类的「职业软肋」

AI不仅能回答问题,还能采访人类了。Anthropic让模型与1250名真实用户深度对话,自动写提纲、追问、做聚类分析,最后画出一张「人类情绪雷达图」。这一次,人类成了AI的研究对象。很难想象,有一天AI真的开始采访人类了。内…

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

Activiti7工作流(一)概述

文章目录1、BPM与BPMN1.1、BPM1.2、BPMN2、Activiti使用步骤2.1. 部署activiti2.2. 流程定义2.3. 流程定义部署2.4. 启动一个流程实例2.5. 用户查询待办任务(Task)2.6. 用户办理任务2.7. 流程结束Activiti是一个工作流引擎, activiti可以将业务系统中复杂的业务流程…

作者头像 李华
网站建设 2026/6/10 2:32:33

List容器

简介 List是双向链表的序列容器,list 通过节点链接存储元素,每个节点独立分配内存,内存不连续。 目的:高效的插入和删除操作,避免频繁的内存重新分配和元素复制开销。 由于每个元素独立分配内存,list 不支持随机访问&a…

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

NBTExplorer:我的世界数据编辑的终极解决方案

NBTExplorer:我的世界数据编辑的终极解决方案 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否想过,为什么别人的我的世界存档里总有各…

作者头像 李华