news 2026/8/22 1:58:48

原型链简易了解

作者头像

张小明

前端开发工程师

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/8/21 14:36:13

LobeChat能否对接Zoom?会议中实时AI字幕生成实验

LobeChat能否对接Zoom?会议中实时AI字幕生成实验 在一场跨国团队的Zoom例会上,你是否曾因口音问题错过关键信息?或者作为听障人士,在视频会议中难以跟上讨论节奏?即便能听懂,面对长达一小时的密集发言&…

作者头像 李华
网站建设 2026/8/21 4:15:20

教程 36 - 方向光照

上一篇:在UI渲染通道中绘制 | 下一篇:法线贴图 | 返回目录 📚 快速导航 目录 简介学习目标光照基础 光照模型概述环境光漫反射光方向光 法线向量 什么是法线法线的重要性法线变换 顶点着色器更新 输入布局修改法线变换数据传递 片段着色器更…

作者头像 李华
网站建设 2026/8/21 22:15:19

LobeChat代码解释器插件实现思路解析

LobeChat代码解释器插件实现思路解析 在今天,一个智能聊天界面如果只能“说话”而不能“做事”,那它或许还称不上真正意义上的AI助手。随着大语言模型的能力不断突破,用户早已不再满足于简单的问答——他们希望AI能帮自己分析数据、画出图表、…

作者头像 李华
网站建设 2026/8/21 8:29:59

wps-view-vue:极速集成WPS文档在线预览的专业Vue组件解决方案

wps-view-vue:极速集成WPS文档在线预览的专业Vue组件解决方案 【免费下载链接】wps-view-vue wps在线编辑、预览前端vue项目,基于es6 项目地址: https://gitcode.com/gh_mirrors/wp/wps-view-vue 在当今数字化办公环境中,文档在线预览…

作者头像 李华
网站建设 2026/8/22 0:56:22

Linux系统编程——线程

目录 一、线程的基本概念 二、进程与线程的核心区别对比 三、POSIX 线程编程:必备核心函数 1.创建线程:pthread_create() 2.获取自身 ID:pthread_self() 3.主动退出:pthread_exit() 4. 取消线程:pthread_cancel…

作者头像 李华
网站建设 2026/8/21 1:48:14

Beyond Compare 5快速激活指南:一键生成方法实现免费用技巧

Beyond Compare 5快速激活指南:一键生成方法实现免费用技巧 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 还在为Beyond Compare 5的高昂授权费用而烦恼吗?这款强大的文…

作者头像 李华