object.getprototypeof 是构建原型链可视化工具的核心方法，需循环调用至 null 以获取完整原型数组，提取构造器名、自有属性列表和内置原型标识，并适配边界情况如 object.create(null) 和跨 iframe 对象。

Object.getPrototypeOf 可以逐级获取对象的原型，是构建原型链可视化工具的核心方法。关键在于持续调用它直到返回 null，并记录每一步的构造函数名和属性信息。

获取并遍历完整原型链

从目标对象开始，反复调用 Object.getPrototypeOf，直到结果为 null。每次获取后保存当前原型对象，形成一个自下而上的原型数组：

• 用 while 循环避免递归深度问题，适合任意深度的原型链
• 注意区分 Object.prototype 和 null：Object.getPrototypeOf(Object.prototype) 返回 null，这是链的终点
• 对函数对象，可同时读取其 name 属性；对普通对象，可用 constructor.name 或 toString.call() 辅助识别

提取可展示的关键信息

每个原型对象可提取三类实用信息用于显示：

Pliny

Pliny是一款把提示词封装成可分享 AI 小应用的低代码工具。

下载

• 构造器名称：obj.constructor?.name || '(anonymous)'，对箭头函数或 Object.create(null) 创建的对象要容错处理
• 自有属性列表：Object.getOwnPropertyNames(proto)，过滤掉不可枚举或 Symbol 属性（按需）
• 是否内置原型：通过 proto === Array.prototype、proto === Date.prototype 等判断，便于高亮显示

生成结构化输出（控制台或 DOM）

不依赖 UI 框架时，可用缩进字符串或嵌套

元素呈现层级：

• 控制台中用 console.group / console.groupEnd 配合 %c 控制颜色，突出 constructor.name
• 网页中动态创建
  列表，每一项包含原型名、属性数量、点击展开属性详情
• 对 Object.prototype 和 Function.prototype 等关键节点加图标或背景色，提升可读性

处理边界情况

真实场景中需应对多种非标准原型链：

• Object.create(null) 创建的对象没有 constructor，其原型链直接为 null
• Proxy 对象的原型由 target 决定，getPrototypeOf trap 可能被拦截，需谨慎判断
• 跨 iframe 的对象，其原型可能无法被当前上下文完全识别（如 iframe 中的 Array !== top.Array），应提示“跨上下文原型”