JavaScript原型链详解与类继承区别

今天golang学习网给大家带来了《掌握JavaScript原型链，区别于类继承的原理》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

原型链是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 看起来像传统面向对象语言，但所有继承、方法定义、静态成员，最终都映射到原型和构造器上。它没有引入新机制，只是让原型链更“体面”地写出来。

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 的差异——链断了，方法就不见了，就这么实在。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。