原型链是JavaScript中对象查找属性和方法时真实执行的路径,由__proto__与prototype配合构成,class只是其语法糖。

原型链不是“要搞懂的理论”,而是 JavaScript 里对象之间实际查找属性和方法时**真正在跑的路径**。类继承只是语法糖,背后全靠原型链驱动。
原型链的本质是 __proto__ 指向与 prototype 属性的配合
每个函数(包括 class)都有一个 prototype 属性,它是一个对象,里面存着将来要被实例共享的方法;每个对象(包括函数)都有一个内部属性 [[Prototype]],在大多数引擎中可通过 __proto__ 访问——它指向创建该对象的构造函数的 prototype。
属性查找时,JS 引擎会沿着 __proto__ 一级级向上找,直到找到或抵达 null。这条链就是原型链。
-
function Foo() {}→Foo.prototype是普通对象,Foo.prototype.constructor === Foo -
const f = new Foo()→f.__proto__ === Foo.prototype -
Foo.prototype.__proto__ === Object.prototype,再往上是Object.prototype.__proto__ === null
class 语法不改变原型链行为,只封装了原型操作
class 看起来像传统面向对象语言,但所有继承、方法定义、静态成员,最终都映射到原型和构造器上。它没有引入新机制,只是让原型链更“体面”地写出来。
立即学习“Java免费学习笔记(深入)”;
class Animal {
constructor(name) { this.name = name; }
speak() { console.log(this.name + ' makes a sound'); }
}
class Dog extends Animal {
bark() { console.log(this.name + ' barks'); }
}
// 等价于手动设置原型链:
Dog.prototype.__proto__ === Animal.prototype; // true
Dog.__proto__ === Animal; // true(静态方法继承)
-
extends实际调用Object.setPrototypeOf(Dog.prototype, Animal.prototype) -
super()在子类构造器里,本质是调用父类构造函数并绑定this -
static方法挂在函数对象本身,不进原型链,但Dog.__proto__ === Animal让静态方法也能被继承
常见混淆点:为什么 instanceof 和 isPrototypeOf() 行为不同?
instanceof 检查的是「右边构造函数的 prototype 是否在左边对象的原型链上」;isPrototypeOf() 检查的是「调用者是否直接出现在目标对象的原型链中」。两者目标一致,但视角相反。
-
f instanceof Foo→ 等价于Foo.prototype.isPrototypeOf(f) -
Array.prototype.isPrototypeOf([])→true;但[] instanceof Array也true -
Object.prototype.isPrototypeOf([])→true,因为[].__proto__.__proto__ === Object.prototype - 误写成
Array instanceof []会报错:左边必须是函数,右边必须是对象
真正容易踩坑的地方:修改原型会影响所有实例,且不能代理私有状态
原型上的属性/方法是共享的。如果在 prototype 上加一个对象或数组,所有实例都会引用同一份内存。
function Counter() {}
Counter.prototype.counts = []; // ❌ 危险!所有实例共用一个数组
const c1 = new Counter();
const c2 = new Counter();
c1.counts.push(1);
console.log(c2.counts); // [1] —— 不是你想要的
- 正确做法:在构造器内初始化实例属性,如
this.counts = [] - 动态添加方法可以,但不要在
prototype上放可变对象 - ES6 的
private field(#field)完全绕过原型链,只能通过实例访问,不参与查找
原型链不是抽象概念,它是每次读取 obj.method 时 JS 引擎真实执行的查找步骤。理解它,关键不是记住“谁指向谁”,而是亲手改几个 __proto__、打断链、观察 hasOwnProperty 和 in 的差异——链断了,方法就不见了,就这么实在。











