JavaScript原型链是对象查找属性时实际遵循的隐式[[Prototype]]引用路径,从对象开始逐级向上直至null;class继承和ES5手动继承均依赖此机制实现方法共享与实例属性继承。

JavaScript 原型链的本质是什么?
原型链不是语法糖,而是 JavaScript 对象查找属性和方法时实际走的路径:每个对象内部都有一个隐式引用 [[Prototype]](可通过 Object.getPrototypeOf(obj) 读取),它指向另一个对象;当访问一个属性时,如果当前对象没有,引擎就顺着这个引用一路向上查找,直到找到或抵达 null(即 Object.prototype.__proto__ === null)。
关键点在于:function 的 prototype 属性只在用 new 调用时才参与对象创建——它会被赋给新对象的 [[Prototype]],而普通对象没有 prototype 属性,只有 __proto__(或 Object.getPrototypeOf())。
用 class 实现继承时原型链怎么连?
class 是语法糖,底层仍靠原型链。使用 extends 后,子类构造函数的 prototype 会自动链接到父类的 prototype,同时子类自身也通过 __proto__ 链接到父类构造函数(实现静态方法继承)。
class Animal {
constructor(name) { this.name = name; }
speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() { return `${this.name} barks`; }
}
const dog = new Dog('Buddy', 'Golden');
// dog.__proto__ === Dog.prototype
// Dog.prototype.__proto__ === Animal.prototype
// Animal.prototype.__proto__ === Object.prototype
// Object.prototype.__proto__ === null
- 必须在子类
constructor中调用super(),否则this不可用 -
Dog.prototype上的方法(如bark)不会出现在Animal.prototype上,但可通过原型链访问speak - 若手动修改
Dog.prototype,需确保constructor指回Dog,否则dog.constructor === Animal
手动设置原型链实现继承(ES5 风格)
核心是两步:让子类实例能访问父类原型上的方法(改 Child.prototype 的 [[Prototype]]),同时让子类构造函数能调用父类初始化逻辑(在 Child 内部用 Parent.call(this, ...))。
立即学习“Java免费学习笔记(深入)”;
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return `${this.name} makes a sound`;
};
function Dog(name, breed) {
Animal.call(this, name); // 继承实例属性
this.breed = breed;
}
// 关键:重设 Dog.prototype 的原型为 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor
Dog.prototype.bark = function() {
return `${this.name} barks`;
};
-
Object.create(Animal.prototype)创建一个空对象,其[[Prototype]]指向Animal.prototype,比直接赋值{ __proto__: Animal.prototype }更规范 - 漏掉
Dog.prototype.constructor = Dog会导致new Dog().__proto__.constructor === Animal,影响 instanceof 和调试识别 - 不能用
Dog.prototype = Animal.prototype,否则修改Dog.prototype会污染Animal.prototype
为什么 instanceof 和 isPrototypeOf() 有时行为不一致?
instanceof 检查的是「右侧构造函数的 prototype 是否在左侧对象的原型链上」;isPrototypeOf() 检查的是「左侧对象是否在右侧对象的原型链上」。两者方向相反,且 instanceof 依赖构造函数的 prototype 属性值,而非运行时对象的实际 [[Prototype]]。
常见陷阱:
- 如果重写了
Child.prototype但忘了恢复constructor,instanceof仍正常,但obj.constructor指向错误 - 动态替换原型后(如
obj.__proto__ = NewProto),instanceof不会更新,因为它只看初始构造关系 -
Array.isArray()比arr instanceof Array更可靠,因为后者在跨 iframe 场景下会失效(不同全局环境的Array构造函数不同)
原型链不是黑盒,它是可观察、可调试的路径;真正容易出错的,往往不是“怎么连”,而是“什么时候被意外断开”或者“谁在中间悄悄改了 __proto__”。











