JavaScript原型链与继承核心解析

JavaScript原型链的本质是一条属性查找路径——当访问对象属性时，引擎会先在对象自身查找，若未找到则沿着隐式原型[[Prototype]]逐级向上追溯至null；而所谓“继承”实为基于原型的委托机制，并非传统意义上的属性复制。文章深入剖析了prototype与__proto__的区别、constructor的不可靠性、箭头函数的特殊性等关键细节，强调通过动手画图、调试代码和反复验证（如instanceof、Object.getPrototypeOf等）来建立直观理解，而非死记硬背概念，真正掌握这一JS核心机制的关键在于实践出真知。

掌握 JavaScript 原型链和继承机制，核心在于理解“对象如何查找属性”以及“构造函数与原型之间的关系”。它不是靠背概念，而是靠画图、调试、改代码来形成直觉。

原型链的本质是属性查找路径

每个对象内部都有一个隐式原型（[[Prototype]]），它指向该对象的原型对象。当你访问 obj.x 时，JS 引擎会：

• 先在 obj 自身找 x
• 找不到就去 obj.__proto__（即 Object.getPrototypeOf(obj)）上找
• 还没找到，就继续顺着 __proto__ 往上找，直到 null 为止

这个向上追溯的链条就是原型链。函数对象还有显式原型 prototype 属性——它只对函数有意义，是 new 实例时被赋给实例 __proto__ 的那个对象。

继承的关键不是“复制”，而是“委托”

JavaScript 没有类继承意义上的“拷贝父类属性”，而是让子对象通过原型链委托给父原型处理方法或共享数据。常见实现方式有：

• 组合继承：构造函数继承 + 原型链继承。最常用，避免了多次调用父构造函数的问题
• 寄生组合继承：优化版组合继承，用 Object.create(Parent.prototype) 设置子类 prototype，避免多余属性
• ES6 class extends：语法糖，底层仍是基于原型链，但强制要求子类 constructor 必须调用 super()

注意：直接修改 Object.prototype 或 Function.prototype 是危险操作，会影响全局行为。

必须搞清的几个易混点

__proto__ 不是标准属性，只是浏览器兼容写法；标准写法是 Object.getPrototypeOf() 和 Object.setPrototypeOf()。
prototype 是函数才有的属性，普通对象没有 prototype（但有 __proto__）。
constructor 不一定可靠：原型被重写后，constructor 可能指向错误函数，需手动修复：Child.prototype.constructor = Child;
箭头函数没有 prototype，不能用 new 调用，也不参与传统继承链。

动手验证比死记更有效

打开控制台，敲几行代码：

• function A(){}; let a = new A(); console.log(a.__proto__ === A.prototype); // true
• console.log(A.prototype.__proto__ === Object.prototype); // true
• console.log(Object.prototype.__proto__); // null

再试试 Object.getPrototypeOf(a) 和 a instanceof A，观察结果是否一致。多试几次，链路就清晰了。

基本上就这些。不复杂但容易忽略细节，画个三层原型图（实例 → 构造函数原型 → Object.prototype）练三次，基本就稳了。

理论要掌握，实操不能落！以上关于《JavaScript原型链与继承核心解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！