当前位置：首页 > news >正文

原型链简易了解

news 2026/6/12 12:56:13

后面会出几篇自定义补环境框架的文章，在讲解环境框架之前，需要对原型链有简单的了解

相信有不少人有一个误区，觉得手补环境才是最好的，因为灵活方便，不想使用补环境框架，因为复杂。

其实根本原因归结于过于依赖吐环境代理，吐环境代理并不万能，很多时候很多环境并不能吐出业务代码真正执行的流程，甚至有时吐出的代理会让你走进错误分支。首先任何业务代码都要遵循加密执行逻辑，而不是吐什么补什么，谨住这一点！！

首先何为原型链，是指将一个对象指向另一个对象，通过使用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检测过了。当然了，正常肯定不是这样补的这种做法太过儿科了至于属性描述符检测，不用过多赘述了了解完原型链之后，就算成功摸入创建自定义环境环境的门槛了，后面有时间再出如何自定义环境框架的文章

感兴趣的联系我，加入知识星球

查看全文