JavaScript继承链调试的关键是理清prototype、__proto__和constructor三者关系,用console.dir()展开原型链、Object.getPrototypeOf()逐级追溯、验证constructor是否被正确修复,并区分方法是自有还是继承而来。

JavaScript继承链调试的关键是看清对象的原型链走向和构造函数归属,不需要额外安装工具,浏览器开发者工具就能完成大部分工作。
用console.dir()展开原型链
在控制台输入console.dir(obj),点击展开对象,能看到__proto__层级结构。每层都显示其构造函数名(如Child → Parent → Object),还能点开查看各层上的方法和属性是否真实存在。注意:箭头右侧显示的是当前层的constructor,要确认它是否被正确修复(比如Child.prototype.constructor === Child)。
检查constructor是否被覆盖
原型链断裂常因Child.prototype = Object.create(Parent.prototype)后没重设constructor。可在控制台快速验证:
-
Child.prototype.constructor === Child—— 应为true -
new Child().__proto__.constructor === Child—— 也应为true - 若返回
Parent,说明constructor没修好,实例化后调用instance.constructor会误指父类
用getPrototypeOf逐级追溯
执行Object.getPrototypeOf(obj)可获取上一级原型,再套一层就看到再上一级:
立即学习“Java免费学习笔记(深入)”;
-
Object.getPrototypeOf(new Child())→ 返回Child.prototype -
Object.getPrototypeOf(Object.getPrototypeOf(new Child()))→ 返回Parent.prototype - 一直执行到
Object.getPrototypeOf(...)返回null为止,这就是原型链终点
验证方法是否可访问
不要只看obj.method能否调用,要区分是自有属性还是继承而来:
-
obj.hasOwnProperty('method')—— 返回false说明是继承的 -
'method' in obj—— 返回true说明在整条原型链中存在 -
obj.__proto__.hasOwnProperty('method')—— 看该方法具体定义在哪一层原型上
这些操作不依赖第三方库,打开控制台就能立刻验证,重点是理清prototype、__proto__和constructor三者的对应关系。


















