JavaScript原型继承：从基础到实践的深度解析

栀秋666
74 阅读3分钟

引言

在JavaScript的世界里，没有类，却有继承。
一切对象的背后，都有一条看不见的“链”——原型链。
它是JavaScript面向对象编程的灵魂，也是开发者进阶路上必经的一道关卡。

本文将带你系统梳理 原型继承的核心机制、实现方式演进、常见陷阱与现代语法糖的本质，助你彻底掌握这一JavaScript底层核心知识，写出更优雅、健壮的代码。

🔍一、原型继承的本质：理解三大核心概念

在传统OOP语言中，继承基于“类”，而在JavaScript中，继承基于对象本身，通过原型链（Prototype Chain） 实现。要真正理解它，必须先厘清三个关键角色：

概念说明
构造函数（Constructor）普通函数，用 new 调用时生成实例，如 function Animal() {}
原型对象（Prototype Object）每个函数都有 .prototype 属性，指向一个可共享的对象
实例（Instance）由 new 构造函数() 创建的对象

✅三者之间的三角关系图解

function Animal(name) {
  this.name = name;
}

Animal.prototype.species = '动物';
Animal.prototype.eat = function() {
  console.log(`${this.name} 正在进食`);
};

const dog = new Animal('阿黄');

此时的关系如下：

dog (实例)
│
├── 自身属性: name = "阿黄"
│
└── __proto__ → Animal.prototype
               │
               ├── species = "动物"
               └── eat = function()
                     
Animal.prototype.constructor → Animal (构造函数)

📌 核心要点总结：

  1. 所有实例的 __proto__ 指向其构造函数的 prototype；
  2. prototype 是一个普通对象，可以添加共享方法和属性；
  3. constructor 默认指向构造函数自身，用于类型识别。

🔗二、原型链：属性查找的终极路径

JavaScript 中的继承本质就是原型链上的属性查找机制。

当你访问一个对象的属性或方法时，引擎会按以下顺序查找：

对象自身 → 原型对象 → 上层原型 → ... → Object.prototype → null

这就是所谓的 原型链（Prototype Chain）。

🧪 示例演示：属性屏蔽与查找优先级

function Cat() {}
Cat.prototype.species = '猫科动物';

const cat = new Cat();
cat.species = '家猫'; // 给实例添加同名属性

console.log(cat.species);         // 输出："家猫"（优先使用实例属性）
console.log(Cat.prototype.species); // 输出："猫科动物"（原型未被修改）

✅ 结论：

  • 实例属性会“屏蔽”原型上的同名属性；
  • 修改实例属性不会影响原型；
  • 删除实例属性后，原型值重新生效：
delete cat.species;
console.log(cat.species); // → "猫科动物"

⛓️ 原型链终点：Object.prototype

所有对象最终都会继承自 Object.prototype，而它的 __proto__ 为 null，表示链的尽头。

console.log(Object.prototype.__proto__); // null

这也是为什么几乎所有对象都能调用 .toString()、.hasOwnProperty() 等方法的原因——它们来自 Object.prototype。

🛠️三、JavaScript继承的演进之路：四种典型实现方式

由于JS没有原生类继承，开发者们不断探索出多种模拟继承的方式。以下是从基础到最优方案的完整演进过程。

1️⃣ 构造函数继承（经典借用）

利用 call / apply 改变父类 this 指向，实现实例属性的复用。

function Animal(name, age) {
  this.name = name;
  this.age = age;
  this.friends = []; // 引用类型
}

function Cat(name, age, color) {
  Animal.call(this, name, age); // 继承实例属性
  this.color = color;
}

const cat1 = new Cat('咪咪', 2, '橘色');
const cat2 = new Cat('花花', 3, '黑白');

cat1.friends.push('小黑');
console.log(cat1.friends); // ['小黑']
console.log(cat2.friends); // [] ← 不共享引用，安全！
✅ 优点：
  • 解决了引用类型属性共享的问题；
  • 子类实例之间互不影响。
❌ 缺点：
  • 无法继承父类原型上的方法（如 Animal.prototype.eat）；
  • 方法定义在构造函数内会导致重复创建，浪费内存。

2️⃣ 原型链继承（最原始方式）

让子类原型等于父类实例，建立完整的原型链。

Cat.prototype = new Animal('未知', 0);
Cat.prototype.constructor = Cat;

const cat = new Cat('喵喵', 1, '灰色');
console.log(cat.name);     // 可访问 → 来自父类实例
console.log(cat.species);  // 可访问 → 来自 Animal.prototype
✅ 优点：
  • 实现了对父类原型方法的完整继承；
  • 方法共享，节省内存。
❌ 缺点：
  • 父类构造函数需提前执行，参数固定；
  • 所有子类实例共享同一个父类实例数据（尤其是引用类型），导致污染风险：
cat1.friends.push('小白');
console.log(cat2.friends); // ['小白'] ← 被意外修改！

3️⃣ 组合继承（最常用，但非最优）

结合前两种方式：构造函数继承 + 原型链继承

function Cat(name, age, color) {
  Animal.call(this, name, age); // 第一次调用 Animal
  this.color = color;
}

// 建立原型链
Cat.prototype = new Animal(); // 第二次调用 Animal ← 性能浪费！
Cat.prototype.constructor = Cat;
✅ 优点：
  • 兼顾实例属性与原型方法继承；
  • 成为早期主流方案。
❌ 缺点：
  • 父类构造函数被调用了两次，造成不必要的性能开销；
  • 内存浪费，且逻辑冗余。

4️⃣ 寄生组合继承（当前最优解）

这是目前公认的最高效、最安全的继承模式，也被 Babel、TypeScript 等工具编译 class extends 时所采用。

核心思想：用空对象作为中介，仅复制原型关系，不执行构造函数

function extend(Child, Parent) {
  // 创建一个空函数作为桥梁
  const F = function () {};
  // 让F的原型指向父类原型
  F.prototype = Parent.prototype;
  // 子类原型指向F的实例（避免直接关联父类实例）
  Child.prototype = new F();
  // 修正constructor指向
  Child.prototype.constructor = Child;
}

使用方式：

function Cat(name, age, color) {
  Animal.call(this, name, age);
  this.color = color;
}

extend(Cat, Animal);

// 添加子类独有方法
Cat.prototype.meow = function () {
  console.log('喵~');
};
✅ 优势一览：
特性是否满足
继承实例属性✅
继承原型方法✅
避免构造函数重复调用✅
防止原型污染✅
支持 instanceof 正确判断✅

💡 一句话总结：寄生组合继承 = 构造函数继承 + Object.create(Parent.prototype) 的思想实现

注：ES5 提供了 Object.create(proto) 方法，可替代上述 F 函数写法：

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

⚠️四、常见问题与最佳实践

即使掌握了继承方式，在实际开发中仍容易踩坑。以下是高频问题及解决方案。

1️⃣ constructor 指向丢失

当重写 Child.prototype 后，constructor 会默认指向 Parent 或 Object，造成类型误判。

Cat.prototype = Object.create(Animal.prototype);
console.log(Cat.prototype.constructor); // → Animal ❌
✅ 解决方案：手动修复
Cat.prototype.constructor = Cat;

✅ 推荐每次修改原型后都检查并修正 constructor！

2️⃣ 原型污染：错误地共享原型

错误做法：直接赋值原型引用

Cat.prototype = Animal.prototype; // ❌ 危险！
Cat.prototype.bark = function() { }; // 修改会影响 Animal！
✅ 正确做法：始终使用 Object.create() 或寄生组合继承
Cat.prototype = Object.create(Animal.prototype);

这样创建的是新对象，与原原型断开引用连接。

3️⃣ 原型链过长影响性能

深层继承可能导致属性查找缓慢，尤其是在频繁访问的场景下。

✅ 优化建议：
  • 控制继承层级不超过 2~3 层；
  • 将高频访问的方法定义在靠近实例的原型上；
  • 必要时可在实例化时拷贝关键方法到实例自身（空间换时间）。

4️⃣ 如何判断继承关系？

方法用途注意事项
instanceof判断对象是否在其原型链上有某构造函数的 prototype✅ 推荐
isPrototypeOf()Animal.prototype.isPrototypeOf(dog)显式判断原型链
Object.getPrototypeOf(obj)获取对象的 [[Prototype]]ES5+ 支持
obj.__proto__非标准，不推荐生产环境使用仅调试可用

💡五、现代语法糖：ES6 class 与 extends 的真相

ES6 引入了 class 和 extends，使继承语法更加清晰简洁：

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    console.log(`${this.name} 正在进食`);
  }
}

class Cat extends Animal {
  constructor(name, age, color) {
    super(name, age); // 相当于 Animal.call(this, ...)
    this.color = color;
  }
  meow() {
    console.log('喵~');
  }
}

但这只是语法糖！底层依然是基于原型链的寄生组合继承。

你可以验证：

const cat = new Cat('咪咪', 2, '橘色');

console.log(cat instanceof Cat);      // true
console.log(cat instanceof Animal);   // true
console.log(Cat.prototype.__proto__ === Animal.prototype); // true

👉 所以：class 并没有改变JS的原型本质，只是让代码更易读、结构更清晰。

🔬 拓展思考：Babel是如何将 class 编译成 ES5 的？正是使用了我们上面讲的“寄生组合继承”模式！

📚六、知识拓展：Object.create 的原理与实现

Object.create(proto) 是 ES5 提供的标准方法，用于创建一个新对象，并将其原型设置为指定对象。

const child = Object.create(Animal.prototype);

等价于：

function create(proto) {
  function F() {}
  F.prototype = proto;
  return new F();
}

这正是寄生组合继承中“中介函数”的标准化版本！

✅七、实战建议：如何选择继承方式？

场景推荐方式理由
学习理解原型机制手动实现组合/寄生组合继承加深原理认知
开发中小型项目使用 class + extends语法清晰，维护性强
需兼容低版本浏览器且不用编译器寄生组合继承（手动封装）高效安全
构建库或框架封装继承工具函数（如 _inherits）复用性强

🎯结语：掌握原型，才能驾驭JavaScript

“如果你理解了原型链，你就理解了JavaScript。”
——《You Don't Know JS》

原型继承不是魔法，而是一种精巧的设计。它赋予了JavaScript极大的灵活性，也带来了理解上的挑战。

🔑 核心收获回顾：

  1. JavaScript继承靠的是原型链，不是类；
  2. 实例通过 __proto__ 连接原型，形成查找链条；
  3. 继承方式经历了从简单到优化的过程，寄生组合继承是最优解；
  4. class 是语法糖，底层仍是原型；
  5. 注意 constructor 修正与原型污染问题。

📎附录：一张图看懂原型继承关系

       实例 (cat)
           │
           ▼ [[Prototype]]
    Cat.prototype ──────────────┐
       │                        │
       ▼ constructor            │
    Cat() ←────────────────────┘
       │
       ▼ [[Prototype]]
Animal.prototype
       │
       ▼ constructor
    Animal()
       │
       ▼ [[Prototype]]
Object.prototype
       │
       ▼
     null

✅ cat instanceof Animal → true（因为原型链包含 Animal.prototype）
✅ cat instanceof Object → true（万物皆继承自 Object）

avatar
文章
阅读
粉丝