JavaScript原型继承全解析

JavaScript的原型继承并非抽象理论，而是实实在在运行时的属性查找机制：每个对象通过内部链接（__proto__）逐级委托到构造函数的prototype，最终抵达Object.prototype并终止于null；new操作符自动建立这一链接，class只是让原型链更易读的语法糖，底层逻辑丝毫未变；理解Object.getPrototypeOf与__proto__的标准性差异、instanceof的原型链比对本质、以及属性屏蔽、跨iframe失效、静态方法与实例字段的作用域陷阱，才能真正驾驭这看似简单却暗藏精妙交互的动态委托系统。

JavaScript 中的原型和原型链不是抽象概念，而是实际运行时对象查找属性的机制——所有实例对象通过 __proto__ 链接到构造函数的 prototype，最终指向 Object.prototype，再往上是 null。

为什么 new Foo() 创建的对象能访问 Foo.prototype 上的方法？

因为 new 操作符会自动把新对象的 __proto__ 指向 Foo.prototype。这个链接不是拷贝，是运行时动态查找的委托关系。

常见错误现象：

• 手动修改了 Foo.prototype 之后，已创建的实例仍能访问新方法（因为查的是引用，不是快照）
• 误以为 obj.__proto__ === Foo.prototype 是“继承”，其实只是属性访问链的起点
• 给实例直接赋值同名属性（如 obj.toString = ...），会屏蔽原型上的 toString，但不影响其他实例

Object.getPrototypeOf(obj) 和 obj.__proto__ 有什么区别？

Object.getPrototypeOf(obj) 是标准、安全的获取原型方式；__proto__ 是非标准遗留属性，虽被广泛支持，但不推荐在生产代码中使用。

使用场景：

• 需要兼容旧环境且明确知道目标浏览器支持 __proto__ 时，可临时调试用
• 写库或工具函数时，必须用 Object.getPrototypeOf，否则在严格模式或某些嵌入环境（如某些小程序 JS 引擎）中会报错
• Object.setPrototypeOf(obj, proto) 是对应的标准设值方法，不要直接赋值 __proto__

为什么 typeof Array === 'function'，但 instanceof Array 返回 true？

因为 Array 是函数（构造函数），它的 prototype 被设计为具有特定内部属性（如 [[Class]] === 'Array'），而 instanceof 的判断逻辑就是沿着左操作数的 __proto__ 链，逐级比对是否等于右操作数的 prototype。

关键点：

• [] instanceof Array → [].__proto__ === Array.prototype → 成立
• Array.prototype instanceof Object → 因为 Array.prototype.__proto__ === Object.prototype
• 跨 iframe 时 instanceof 会失效（不同全局环境的 Array 构造函数不相等），此时要用 Array.isArray()

ES6 class 声明是否改变了原型链本质？

没有。class 只是语法糖，底层仍是基于原型的机制。所有 class 定义的方法都挂载在 ClassName.prototype 上，extends 也只是设置子类 prototype.__proto__ 指向父类 prototype，并确保 constructor 正确。

容易踩的坑：

• 在 class 中定义的字段（如 value = 1）是实例属性，不是原型属性，每次 new 都重新分配
• 静态方法（static method()）挂在类本身上，不进入原型链，无法被实例继承
• 子类 constructor 中必须调用 super()，否则无法访问 this——因为 super() 才真正触发父类原型链的初始化

原型链真正的复杂点不在结构，而在它和属性描述符（get/set）、hasOwnProperty、in 操作符、for...in 遍历之间的交互细节——这些地方稍不注意，就会出现“属性明明定义了却读不到”或“删不掉”的情况。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript原型继承全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。