无需登录 数据私有 本地保存

原型链浏览器 - 查看对象继承关系

JavaScript 开发工具 原型链 可视化 继承
13
0
0
0

原型链浏览器

可视化探索JavaScript对象的原型继承关系，理解原型链的工作原理。选择预设对象或输入自定义表达式开始探索。

快速选择对象类型
自定义表达式输入
输入任意JavaScript表达式，我们将追踪其原型链（在安全沙箱中执行）

点击上方预设按钮或输入表达式来探索原型链

原型链是JavaScript继承机制的核心，每个对象都有原型，直到 null

常见问题与知识点
什么是原型链（Prototype Chain）？
原型链是JavaScript实现继承的核心机制。每个JavaScript对象都有一个内部属性[[Prototype]]（通过__proto__或Object.getPrototypeOf()访问），指向它的原型对象。当访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或到达null（原型链的终点）。这种链式查找机制使得对象可以"继承"原型上的属性和方法。
原型链的终点是什么？
所有常规对象的原型链最终都会指向Object.prototype，而Object.prototype的原型是null。null是原型链的终点，表示"没有原型"。当属性查找到达null时，如果仍未找到该属性，则返回undefined。特殊地，使用Object.create(null)创建的对象没有原型，其原型直接为null。
__proto__ 和 prototype 有什么区别？
__proto__（非标准但被广泛支持）是每个对象都有的属性，指向该对象的原型（即[[Prototype]]）。prototype是只有函数才有的属性，指向该函数作为构造函数时创建的实例的原型对象。
例如：function Foo(){}，Foo.prototype是它的原型对象，而new Foo().__proto__ === Foo.prototype。简单记忆：prototype属于构造函数，__proto__属于实例。
Object.prototype 和 Function.prototype 的关系是什么？
Function.prototype是一个特殊的对象（实际是一个空函数），它的原型是Object.prototype。也就是说Function.prototype.__proto__ === Object.prototype。同时，Object本身是一个构造函数（函数），所以Object.__proto__ === Function.prototype。这形成了一个有趣的关系：所有函数（包括Object、Array等构造函数）的原型都是Function.prototype，而Function.prototype的原型又是Object.prototype，最终指向null。
Object.create(null) 有什么用？
Object.create(null)创建一个没有原型的对象（即__proto__为null）。这种对象不会继承Object.prototype上的任何属性（如toString、hasOwnProperty等），是真正"纯净"的字典对象。它非常适合用作哈希映射（在ES6 Map出现之前），因为不用担心原型链上的属性名冲突（如constructor、__proto__等）。同时也用于需要完全控制属性访问的场景。
如何防止原型链污染（Prototype Pollution）？
原型链污染是一种安全漏洞，攻击者通过修改Object.prototype或Array.prototype等来影响所有对象。防护措施包括：1) 使用Object.create(null)创建无原型对象存储数据；2) 使用Object.freeze(Object.prototype)冻结原型；3) 使用Map代替普通对象作为键值存储；4) 在合并对象时使用安全的深度合并方法（如Object.assign配合过滤）；5) 避免使用eval和不安全的递归合并函数。
🔧 相关工具