news 2026/6/12 3:21:19

原型链简易了解

作者头像

张小明

前端开发工程师

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 17:51:16

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

一、芯片核心定位HF5805 是一款集成了 高压N-MOSFET开关 与 智能保护逻辑 的 前端保护IC 其核心价值在于 高达50V的输入耐压能力、高达40V的“热插拔”耐受性 以及 灵活可调的过流保护(OCP) 专为 智能手机、平板电脑、TWS耳机 等便携设备的 充电端口/电源…

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

教程 35 - 在UI渲染通道中绘制

上一篇:多渲染通道 | 下一篇:方向光照 | 返回目录 📚 快速导航 目录 简介学习目标2D顶点格式 vertex_2d定义与vertex_3d的区别顶点布局对比 材质类型扩展 材质类型枚举UI材质配置材质加载器更新 泛型几何体创建 接口修改顶点大小参数Vulkan后…

作者头像 李华
网站建设 2026/6/12 14:41:12

代码分享 | Xenium数据识别肿瘤交界区扩展--免疫浸润带

前言 前面我们介绍了怎样在空间数据上,基于已经定义好的细胞类型,自动识别出肿瘤交界区,拟合一条边界线出来,便于后续研究,比如想看某些基因是否随着与交界处距离的变化它的表达也会发生变化等。 代码分享 | Xenium数…

作者头像 李华
网站建设 2026/6/12 8:31:31

OpenCore Legacy Patcher终极指南:旧设备系统升级的完整解析

当你的Mac设备被苹果官方标记为"过时",是否就意味着它只能被淘汰?答案是否定的。通过OpenCore Legacy Patcher这一革命性工具,2007年至2017年间的多款Mac设备能够突破系统限制,流畅运行最新版本的macOS。这不仅仅是一次…

作者头像 李华
网站建设 2026/6/9 22:06:56

Activiti7工作流(二)开发环境

文章目录1、Activiti所需开发环境2、下载activiti73、流程设计器IDEA下安装4、Activiti的数据库支持5、 在MySQL生成表5.1 创建数据库5.2 使用java代码生成表6、 表结构介绍6.1 表的命名规则和作用6.2 Activiti数据表介绍1、Activiti所需开发环境 Jdk1.8或以上版本 Mysql 5及以…

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

家政服务管理系统(源码+文档+部署+讲解)

温馨提示:文末有资源获取方式~ 一、开发背景上班族家庭:由于工作繁忙,无暇顾及家务,对日常保洁、家电清洗等便捷高效的家政服务需求强烈,希望能够通过简单的操作,在合适的时间预约到专业的家政人员上门服务…

作者头像 李华