JavaScript 类继承（完整教程）

JavaScript 类继承：从零理解面向对象的基石

在学习 JavaScript 的过程中，你可能会遇到一个绕不开的概念——类继承。它不仅是面向对象编程（OOP）的核心，也是构建可维护、可扩展代码结构的关键。如果你曾经在项目中写过重复的代码，或者希望不同类之间共享某些行为，那么“JavaScript 类继承”就是你该掌握的工具。

类继承就像现实世界中的家族血脉：孩子继承父母的基因，同时也可能拥有自己的独特特征。在代码世界中，子类可以继承父类的属性和方法，同时还能扩展或覆盖它们。这不仅减少了重复，还让代码更清晰、更易于维护。

本文将带你一步步理解 JavaScript 类继承的底层机制，从 ES6 的 class 语法到原型链的本质，再到实际应用中的最佳实践。无论你是刚接触编程的初学者，还是已有一定经验的中级开发者，都能从中获得实用的知识。

ES6 class 语法：让继承变得更直观

在 ES6 之前，JavaScript 使用构造函数和原型链来模拟类的概念，写法复杂且容易出错。ES6 引入了 class 关键字，让面向对象编程变得像 Java 或 C++ 一样直观。

// 定义一个父类：动物
class Animal {
  // 构造函数，初始化实例属性
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 实例方法：所有动物都会叫
  speak() {
    console.log(`${this.name} 发出声音`);
  }

  // getter 方法：获取动物年龄
  getAge() {
    return this.age;
  }
}

// 定义一个子类：狗，继承自 Animal
class Dog extends Animal {
  // 构造函数中可以调用 super() 调用父类构造函数
  constructor(name, age, breed) {
    super(name, age); // 调用父类的构造函数，传参
    this.breed = breed; // 添加子类独有的属性
  }

  // 重写父类的方法：狗会汪汪叫
  speak() {
    console.log(`${this.name} 汪汪叫！`);
  }

  // 子类独有的方法
  fetch() {
    console.log(`${this.name} 正在捡球！`);
  }
}

// 创建实例
const myDog = new Dog('旺财', 3, '金毛');

// 调用继承的方法
myDog.speak(); // 输出：旺财 汪汪叫！
myDog.fetch(); // 输出：旺财 正在捡球！

// 调用父类的方法（通过 super）
console.log(myDog.getAge()); // 输出：3

💡 小贴士：extends 关键字是类继承的核心，它告诉 JavaScript 这个类是另一个类的子类。super() 用于调用父类的构造函数，必须在子类构造函数中第一行调用，否则会报错。

原型链：类继承的底层机制

虽然 class 语法看起来像传统 OOP，但 JavaScript 的继承本质上是基于原型链的。理解这一点，能帮你更好应对复杂场景。

每个对象都有一个内部属性 [[Prototype]]，指向它的原型对象。当访问一个对象的属性或方法时，JavaScript 会先在对象自身查找，找不到就沿着原型链向上查找，直到找到或到达顶层（null）。

// 手动模拟类继承（不推荐，但有助于理解）
function Animal(name, age) {
  this.name = name;
  this.age = age;
}

Animal.prototype.speak = function () {
  console.log(`${this.name} 发出声音`);
};

Animal.prototype.getAge = function () {
  return this.age;
};

function Dog(name, age, breed) {
  Animal.call(this, name, age); // 手动调用父类构造函数
  this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正构造函数指向

// 重写方法
Dog.prototype.speak = function () {
  console.log(`${this.name} 汪汪叫！`);
};

Dog.prototype.fetch = function () {
  console.log(`${this.name} 正在捡球！`);
};

// 创建实例
const dog = new Dog('旺财', 3, '金毛');
dog.speak(); // 汪汪叫！
dog.fetch(); // 正在捡球！

📌 关键点：Object.create(Animal.prototype) 是实现继承的关键。它创建了一个新对象，其原型指向 Animal.prototype，这样 Dog 实例就能访问 Animal 的方法。

super 的作用：调用父类方法的桥梁

在子类中，super 不仅能调用父类的构造函数，还能调用父类的普通方法。这是实现“扩展而非覆盖”的关键。

class Vehicle {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  start() {
    console.log(`${this.brand} ${this.model} 启动了`);
  }

  stop() {
    console.log(`${this.brand} ${this.model} 停止了`);
  }
}

class Car extends Vehicle {
  constructor(brand, model, color) {
    super(brand, model); // 调用父类构造函数
    this.color = color;
  }

  // 重写 start 方法，但调用父类逻辑
  start() {
    console.log('正在预热引擎...');
    super.start(); // 调用父类的 start 方法
  }

  // 新增方法
  honk() {
    console.log(`${this.brand} ${this.model} 按喇叭！`);
  }
}

const myCar = new Car('丰田', '凯美瑞', '红色');
myCar.start(); // 输出：正在预热引擎... 丰田 凯美瑞 启动了
myCar.honk();  // 输出：丰田 凯美瑞 按喇叭！

✅ 使用场景：当你希望在子类中扩展父类行为，而不是完全替换时，super 是最佳选择。比如日志记录、权限检查等通用逻辑。

多层继承与方法查找：理解继承的层次

JavaScript 支持多层继承，即子类可以继承父类，而父类又可以继承另一个类。

class LivingBeing {
  breathe() {
    console.log('正在呼吸');
  }
}

class Animal extends LivingBeing {
  move() {
    console.log('正在移动');
  }
}

class Dog extends Animal {
  bark() {
    console.log('汪汪！');
  }
}

const dog = new Dog();
dog.breathe(); // 正在呼吸（继承自 LivingBeing）
dog.move();    // 正在移动（继承自 Animal）
dog.bark();    // 汪汪！（自身方法）

🔍 方法查找顺序：当调用 dog.breathe() 时，JavaScript 会按以下顺序查找：

1. dog 实例自身是否有 breathe
2. Dog.prototype 是否有 breathe
3. Animal.prototype 是否有 breathe
4. LivingBeing.prototype 是否有 breathe
5. 最终找到并执行

这就是原型链的查找机制，也是 JavaScript 类继承的根基。

实际应用：构建可复用的 UI 组件

在前端开发中，类继承常用于构建 UI 组件。比如，一个基础的按钮组件，可以被扩展为提交按钮、取消按钮等。

class Button {
  constructor(text, type = 'primary') {
    this.text = text;
    this.type = type;
  }

  render() {
    const classes = `btn btn-${this.type}`;
    return `<button class="${classes}">${this.text}</button>`;
  }
}

class SubmitButton extends Button {
  constructor(text) {
    super(text, 'success'); // 使用 success 类型
  }

  // 扩展功能：提交前确认
  submit() {
    if (confirm('确定要提交吗？')) {
      console.log('提交成功！');
    }
  }
}

class CancelButton extends Button {
  constructor(text) {
    super(text, 'danger'); // 使用 danger 类型
  }

  // 扩展功能：取消操作
  cancel() {
    console.log('操作已取消');
  }
}

const submitBtn = new SubmitButton('提交');
const cancelBtn = new CancelButton('取消');

console.log(submitBtn.render()); // <button class="btn btn-success">提交</button>
console.log(cancelBtn.render()); // <button class="btn btn-danger">取消</button>

submitBtn.submit(); // 弹出确认框
cancelBtn.cancel(); // 输出：操作已取消

✅ 优势：通过继承，我们避免了重复编写按钮结构代码，同时保留了扩展能力。这种模式在构建组件库时非常常见。

常见陷阱与最佳实践

在使用 JavaScript 类继承时，有几个常见陷阱需要警惕：

🛠 推荐做法：优先使用组合模式。比如，不要让 Dog 继承 Animal 再继承 Pet，而是让 Dog 拥有一个 Animal 实例作为属性。

结语：掌握 JavaScript 类继承，提升代码质量

JavaScript 类继承是构建复杂应用不可或缺的能力。它让我们能以更优雅的方式组织代码，减少重复，增强可维护性。从 ES6 的 class 语法到原型链机制，从简单的单层继承到多层嵌套，再到实际项目中的组件构建，理解这一机制，能让你的代码更具结构性和扩展性。

无论你是初学者还是中级开发者，建议在项目中主动尝试使用类继承。从一个简单的 User 类开始，逐步构建 Admin、Moderator 等子类，你会发现代码的组织方式变得清晰而高效。

掌握 JavaScript 类继承，不只是学会语法，更是掌握一种思维方式——将现实世界中的关系映射到代码中，让程序更贴近真实逻辑。