JavaScript原型链是运行时属性查找机制,实例通过__proto__链接到构造函数prototype,最终指向Object.prototype;new操作符自动设置该链接,Object.getPrototypeOf是标准获取方式,class只是语法糖,底层仍基于原型。

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__ 是非标准遗留属性,虽被广泛支持,但不推荐在生产代码中使用。
立即学习“Java免费学习笔记(深入)”;
使用场景:
- 需要兼容旧环境且明确知道目标浏览器支持
__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 遍历之间的交互细节——这些地方稍不注意,就会出现“属性明明定义了却读不到”或“删不掉”的情况。











