当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript原型链详解与类继承区别

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

2026-02-02 14:01:45 0浏览收藏

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

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

如何掌握javascript的原型链概念_它与类继承有什么区别？

原型链不是“要搞懂的理论”，而是 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] —— 不是你想要的